Feature-Erkennung für setDragImage von HTML5 Drag & Drop

Question

Gibt es eine Möglichkeit, Feature-Erkennung für setDragImage von HTML5 Drag & Drop (in JavaScript oder Dart)?

ich tun, um die allgemeine HTML5 Drag & Drop-Feature-Erkennung mit den folgenden (aus guide to detecting everything):

return 'draggable' in document.createElement('span'); 

Diese true für Chrome, Firefox etc. zurück, und IE10. Es wird false für IE9 zurückgegeben.

Nun ist das Problem mit IE10: Während es den meisten von HTML5 Drag & Drop unterstützt, wird setDragImage nicht unterstützt und ich brauche eine polyfill bietet nur für setDragImage. Aber ich konnte keinen Weg finden, dies zu erkennen.

Answer 1

Die Feature-Erkennung, die in der vorherigen Antwort erwähnt wird, schlägt in Opera 12 fehl - weil es die Unterstützung für setDragImage beansprucht, funktioniert es einfach nicht. Die Dart-Bibliotheken, mit denen verknüpft wurde, scheitern auch vollständig in Opera 12 und werfen mehrere Fehler auf die Konsole.

Es ist eigentlich nicht möglich, ein Geisterbild zu füllen - selbst wenn Sie ein Dokumentelement erstellen und es an der richtigen Stelle positionieren, können Sie das Standardelement ohne setDragImage nicht entfernen. Die einzige Lösung, die ich kenne, besteht darin, Opera 12 und alle Versionen von IE (bis einschließlich IE11) herauszufiltern und sie als Legacy-Browser zu behandeln, die mit herkömmlichen Mausereignisskripten behandelt werden müssen. Da der direkte Funktion Test nicht besteht, würde ich einen indirektes Objekt Test empfehlen (dh ein Objekt Test verwenden, um diese speziellen Browser zu erkennen):

var hasNativeDraggable = (element.draggable && !(document.uniqueID || window.opera));

Answer 2

Diese Lösung geht davon aus, dass D & D-Unterstützung bereits überprüft wurde.

JavaScript (getestet in IE, Firefox, Opera und Chrome):

function test() { 
    var testVar = window.DataTransfer || window.Clipboard; // Clipboard is for Chrome 
    if("setDragImage" in testVar.prototype) { 
     window.alert("supported"); 
    } else { 
     window.alert("not supported"); 
    } 
} 

Dart:

ich keine Möglichkeit, dies zu tun mit "native" Dart-Code gefunden haben, so js-interop ist der Weg, den man gehen sollte.

Answer 3

Sie den polyfill SetDragImage-IE verwenden:

https://github.com/MihaiValentin/setDragImage-IE

Dies ist, wie es (aus der Readme) tatsächlich funktioniert:

ich bemerkt, dass, wenn Sie eine Änderung an der machen Element-Stil (Hinzufügen einer Klasse, die Aussehen ändert) innerhalb der dragstart Ereignis und dann Entfernung sofort in einem setTimeout, wird Internet Explorer eine Bitmap-Kopie des geänderten Elements und wird es zum Ziehen verwenden. Also, was diese Bibliothek tatsächlich tut, ist die Implementierung der setDragImage Methode, die den Element-Stil des Ziels durch Hinzufügen einer Klasse ändert, die enthält das Bild, das beim Ziehen angezeigt werden soll, und dann entfernt es.Auf diese Weise zeigt der Browser den temporären Stil das Element als das Drag-Image an.