Wie HTML5 Drag & Drop-Ereignisse in Javascript zu simulieren?

Question

Als Titel versuche ich ein HTML5 Drag & Drop-Ereignis in Javascript zu simulieren.

Ich habe in jquery.ui.simulate und auch die Simulationsfunktion here untersucht. Beide scheinen in der Lage zu sein, Drag & Drop simulieren zu können, indem sie mousedown, mousemove und mouseup simulieren, was mit jQuery UI-Objekten funktioniert.

Aber die Drag/Drop-Ereignisse in Seiten wie drag and drop demo site scheinen mit den gleichen Methoden nicht simulierbar zu sein. Das Auslösen eines Mousedowns löst das Dragstart-HTML5-Ereignis nicht aus.

Gibt es eine Möglichkeit, entweder drag Event gefeuert werden basierend auf einer Simulation mousedown-/mousemove-/etc, oder gibt es eine Möglichkeit, die drag (und dann fallen lassen) Ereignisse direkt zu simulieren?

Ich habe versucht, die simulation function found on SO Modifizierung das HTML5 drag Ereignis hinzufügen, damit ich so etwas wie die folgenden auf der Demo-Seite

simulate(document.querySelector('#three'), 'dragstart') 

aber ich erhalte eine Fehlermeldung versuchen könnte, weil ich nicht sicher bin, wie zu erstellen Das dataTransfer-Objekt im simulierten Dragstart-Ereignis korrekt.

Grundsätzlich werde ich eine Antwort akzeptieren, die ich Element ziehen lassen würde ‚drei‘ auf das ‚ist‘ Element in dem demo drag and drop page entweder mit jquery.ui.simluate (oder einer anderen Bibliothek) oder durch eine modifizierte Version der Verwendung simulate function Ich fand auf SO.

Answer 1

Am besten erstellen Sie ein gefälschtes Ereignisobjekt.

In meinen Unit-Tests für eine Drag-and-Drop-Datei-Upload-Bibliothek (Droplit, schamlose Werbung), habe ich dies mit Event Methode jQuery. In meinem Quellcode ich meinen Drop-Ereignis-Listener mit element.ondrop() wie so:

element.ondrop = function(e) { 
    e.preventDefault(); 
    readFiles(e.dataTransfer.files); 
}; 

Und dann kann ich das testen, indem er ein gefälschtes Ereignisobjekt zu bauen und es in die ondrop Methode übergeben.

element.ondrop($.Event('drop', {dataTransfer: { files: [] }}));