HTML5 DnD dataTransfer setData oder getData funktionieren nicht in jedem Browser außer Firefox

Bedenken SieJSFiddle. Es funktioniert gut in Firefox (14.0.1), schlägt aber in Chrome (21.0.1180.75), Safari (?) Und Opera (12.01?) Unter Windows (7) und OS X (10.8) fehl. Soweit ich das beurteilen kann, liegt das Problem entweder bei dersetData() odergetData() Methoden auf demdataTransfer Objekt. Hier ist der relevante Code von JSFiddle.

var dragStartHandler = function (e) {
    e.originalEvent.dataTransfer.effectAllowed = "move";
    e.originalEvent.dataTransfer.setData("text/plain", this.id);
};

var dragEnterHandler = function (e) {
    //  dataTransferValue is a global variable declared higher up.
    //  No, I don't want to hear about why global variables are evil,
    //  that's not my issue.
    dataTransferValue = e.originalEvent.dataTransfer.getData("text/plain");

    console.log(dataTransferValue);
};

Soweit ich das beurteilen kann, sollte dies einwandfrei funktionieren. Wenn Sie beim Ziehen eines Elements auf die Konsole schauen, wird die ID ausgeschrieben. Dies bedeutet, dass das Element in Ordnung ist und das ID-Attribut abgerufen wird. Die Frage ist, ob die Daten nicht gesetzt oder nicht abgerufen werden.

Ich würde mich über Vorschläge freuen, da ich nach einer Woche mit drei Versuchen und über 200 Versionen langsam den Verstand verliere. Ich weiß nur, dass es in Version 60 oder so funktioniert hat und dass sich der Code überhaupt nicht geändert hat ...

Tatsächlich besteht einer der Hauptunterschiede zwischen 6X und 124 darin, dass ich die Ereignisbindung von geändert habelive() zuon(). Ich glaube nicht, dass dies das Problem ist, aber ich habe bei der Arbeit an DnD einige Fehler von Chrome festgestellt. Dies wurde entlarvt. Die Ereignisbindungsmethode hat keine Auswirkung auf das Problem.

AKTUALISIEREN

Ich habe ein neues erstelltJSFiddle das streift absolut alles heraus und verlässt nur die Eventbindung und die Handler. Ich habe es mit jQuery 1.7.2 und 1.8 mit beiden getesteton() undlive(). Das Problem blieb bestehen, so dass ich ein Level herunterfiel und alle Frameworks entfernte und reines JavaScript verwendete. Die Angelegenheitimmer noch beharrte, also ist es nicht mein Code, der ausfällt, basierend auf meinen Tests. Stattdessen scheinen Chrome, Safari und Opera beide zu implementierensetData() odergetData() off spec oder scheitern einfach aus irgendeinem Grund oder einem anderen. Bitte korrigieren Sie mich, wenn ich falsch liege.

Wenn Sie sich das neue JSFiddle ansehen, sollten Sie in der Lage sein, das Problem zu replizieren. Schauen Sie sich einfach die Konsole an, wenn Sie über ein Element ziehen, das zum Akzeptieren eines Ablegens bestimmt ist. Ich habe ein Ticket mit eröffnetChrom. Am Ende mache ich vielleicht noch etwas falsch, aber ich weiß einfach nicht, wie ich DnD an dieser Stelle anders machen soll. Das neue JSFiddle ist so einfach wie es nur geht ...

Antworten auf die Frage(8)

Ihre Antwort auf die Frage