HTML5 Drag-and-Drop ondragover nicht feuern, in Chrom

Ich mit diesem einfachen Beispiel hier, das ist nicht das brennen in Chrome 11 ist für mich http://jsfiddle.net/G9mJw/ die darin besteht, auf einem sehr einfachen code:

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}


dropzone.addEventListener('dragover', onDragOver, false);

Scheint es gut zu funktionieren in safari tho...aber in Chrome die dragover - Ereignis wird nicht aufgerufen, wenn das rote Quadrat berühren Sie das gepunktete ein.

Ich habe versucht, zu replizieren einige Beispiele, die diese arbeiten derzeit in chrome, aber es din ' T Arbeit für mich.

Ich habe versucht zu verhindern, dass das default-Verhalten, um zu sehen, wenn es funktionierte, aber es kam nicht. jede Hilfe wäre sehr geschätzt.

Dank

  • Es funktioniert bei mir in Chrome 12 (Letzte veröffentlichte). Vielleicht 11 nicht unterstützen es noch?
  • komisch, ich habe gerade versucht mit 12.0.742.100 und es funktioniert immer noch nicht...der counter nicht, dann fügen Sie 1 für jedes Ereignis ausgelöst...und das heißt nicht gefeuert zu werden. Auch ist es noch merkwürdiger, da html5demos.com/drag funktioniert ohne problem, auch am 11.
InformationsquelleAutor zanona | 2011-06-25
  1. 11

    Es scheint, dass es notwendig ist, um einige Daten zu den draggable-element auf der dragstart Ereignis für die dragover event ausgelöst werden, auf die dropzone.

    Habe ich aktualisiert, das snippet http://jsfiddle.net/G9mJw/20/ die funktioniert jetzt in chrome als auch.

    und den neuen code wie folgt:

    var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragStart(event) {
    event.dataTransfer.setData('text/html', null); //cannot be empty string
}

function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}   

draggable.addEventListener('dragstart', onDragStart, false);
dropzone.addEventListener('dragover', onDragOver, false);

    Da auch einige mehr Informationen darüber, wie dies funktioniert unter:
    https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data und diese Dinge erwähnt:

    Wenn ein Widerstand Auftritt, die Daten müssen in Zusammenhang mit der drag identifiziert, was gezogen wird.

    Die einfacher zu verstehen...
    Ich versuche nur, um herauszufinden, wie funktioniert das funktioniert in Safari, ohne die Notwendigkeit, um Daten zu senden? oder vielleicht ist es schon senden einige Inhalte als Standard?

    Auch die event.dataTransfer.setData('text/html', null); Methode, neugierig-kann nicht senden Sie eine leere Zeichenfolge wie event.dataTransfer.setData('text/html', ''); sonst die dragover - Ereignis wird nicht ausgelöst.

    • ein interessanter Nachtrag, wenn Sie geschehen, werden mit jQuery, für mich zumindest, es scheint, dass die übergebene event-Objekt zu meinem drag-Funktionen nicht enthalten, die dataTransfer-Objekt. Ich habe die Umstellung vom $('.foo').live('dragstart',...) zu elem.addEventListener('dragstart',...) um meine events korrekt
    • was ist, wenn das Drag-Objekt ist nicht einmal von Ihrem browser? (sprich: aus einem anderen browser statt?)
    • wenn Sie mit jQuery sind, können Sie tatsächlich fügen Sie das dataTransfer-Objekt das event-Objekt mit jQuery.event.props.push("dataTransfer"); (siehe "Andere Eigenschaften" auf api.jquery.com/category/events/event-object)
    • Sehr nützlich sind. Tun Sie warnen, es fügt overhead, um alle Ereignisse, also eine überlegung Wert, wie viel Ihre Benutzeroberfläche verwendet drag-and-drop im Vergleich zu anderen events, bevor Sie Tauchen nur in und hinzufügen.
    • Diese Geige hat nicht funktioniert, im Firefox für mich
    • Diese Geige scheint nicht kompatibel mit bestimmten Versionen von jQuery
    • die verlinkten jsfiddle funktioniert nicht (keine dragover-Ereignisse registriert) in meinem Chrom-Version 51.0.2704.63 (64-bit) auf archlinux. Komischerweise, wenn ich ziehen Sie über den roten Platz von einer firefox-Instanz zu meinem chromium, funktioniert es. Dies kostet mich eine Menge Zeit und ich bin aus Ideen heraus. Jede Hilfe sehr geschätzt.

    InformationsquelleAutor zanona
  2. 4

    Chrome unterstützt derzeit nur wenige Datentypen — wenn Ihre Daten nicht erkannt MIME-Typ drag/drop einfach nicht gehen. Dies ist ganz klar eine Verletzung der W3C-Spec, und das ist nicht ein problem in Firefox (so lange, wie Sie bieten einige Sortieren von Daten) oder sogar Safari (ermöglicht das ziehen zu gehen, ob die Daten gesetzt ist oder nicht).

    Dem Chromium-bug-report ist hier: http://code.google.com/p/chromium/issues/detail?id=93514

    • "text/html" sollte ok sein, nicht? Es ist nicht für mich arbeiten, entweder. Siehe mein Kommentar zur Antwort von zanona.
    • Sie scheinen es behoben, wenn ich das Bearbeiten der verlinkten JSFiddle aus, dass ticket (jsfiddle.net/pimvdb/HU6Mk/10) und starten Sie es erneut, Chrome erlauben das ziehen von "text/html" und andere content-Typen jetzt.
    InformationsquelleAutor natevw
  3. 0

    Ich hatte Probleme mit mime-Typen.

    W3Schools hat eine Seite, mit dem Sie Experimentieren können:
    http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

    Ihre code-Beispiel würde bei mir nicht funktioniert, bis ich das geändert getData und setData "text/html" statt "Text".

    Bin ich mit:
    Version 34.0.1847.116 Ubuntu 14.04 aura (260972)

    InformationsquelleAutor Anthony Scaife
Schreibe einen Kommentar