Come simulare gli eventi di trascinamento e rilascio HTML5 in javascript?

Question

Come titolo, sto tentando di simulare un evento di trascinamento HTML5 in javascript.

Ho esaminato jquery.ui.simulate e anche la funzione di simulazione here. Entrambi sembrano essere in grado di essere utilizzati per simulare il drag and drop simulando il mouse, il mouse e il mouse che funziona con gli oggetti dell'interfaccia utente jQuery.

Ma gli eventi di trascinamento in pagine come drag and drop demo site non sembrano essere simulabili utilizzando gli stessi metodi. L'attivazione di un mouse non sembra attivare l'evento HTML5 dragstart.

C'è un modo per ottenere gli eventi dragstart da attivare in base a una simulazione di mouse/mousemove/etc oppure esiste un modo per simulare direttamente gli eventi dragstart (e quindi rilasciarli)?

Ho provato la modifica del simulation function found on SO per aggiungere l'evento HTML5 dragstart così ho potuto provare qualcosa di simile a quanto segue nella pagina dimostrativa

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

ma ottengo un errore perché non sono sicuro di come creare l'oggetto dataTransfer sull'evento dragstart simulato correttamente.

Fondamentalmente, accetterò qualsiasi risposta che mi permetta di trascinare l'elemento 'tre' nell'elemento 'bin' nello demo drag and drop page usando jquery.ui.simluate (o un'altra libreria) o usando una versione modificata del simulate function L'ho trovato su SO.

Answer 1

La soluzione migliore è ricreare un oggetto evento falso.

Nella mia unit test per una libreria di upload di file drag-and-drop (Droplit, plug shameless), ho fatto questo con il metodo Event di jQuery. Nel mio codice sorgente ho impostato la mia caduta di listener di eventi con element.ondrop() in questo modo:

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

E poi posso testare il tutto con la costruzione di un oggetto evento falso e passarlo nel metodo ondrop.

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