Jak symulować zdarzenia przeciągania i upuszczania HTML5 w javascript?

Question

Jako tytuł próbuję zasymulować zdarzenie przeciągania i upuszczania HTML5 w javascript.

Zajrzałem do jquery.ui.simulate, a także funkcja symulacji here. Oba mogą być używane do symulacji przeciągania i upuszczania poprzez symulowanie mousedown, mousemove i mouseup, które działają z obiektami JQuery UI.

Jednak zdarzenia przeciągania/upuszczania na stronach takich jak drag and drop demo site nie wydają się symulowalne przy użyciu tych samych metod. Wyzwalanie mousedown nie wydaje się wywoływać zdarzenia HTML5 dragstart.

Czy istnieje sposób na uzyskanie zdarzeń dragstart do wystrzelenia w oparciu o symulację mousedown/mousemove/etc, czy istnieje sposób na symulowanie zdarzeń dragstart (a następnie upuszczania) bezpośrednio?

Próbowałem modyfikowania simulation function found on SO aby dodać wydarzenie HTML5 dragstart więc mogę spróbować coś jak następuje na stronie demo

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

ale pojawia się błąd, ponieważ nie jestem pewien, jak stworzyć obiekt dataTransfer poprawnie symulowanego zdarzenia dragstart.

Zasadniczo przyjmuję dowolną odpowiedź, która pozwoliłaby mi przeciągnąć element "three" do elementu "bin" w demo drag and drop page przy użyciu jquery.ui.simluate (lub innej biblioteki) lub używając zmodyfikowanej wersji simulate function Znalazłem na SO.

Answer 1

Najlepiej jest odtworzyć fałszywy obiekt zdarzenia.

W moich testach jednostkowych dla biblioteki do przesyłania plików typu "przeciągnij i upuść" (Droplit, bezwstydna wtyczka), robię to przy pomocy metody jQuery: Event. W moim kodu źródłowego mogę ustawić drop zdarzeń słuchacza element.ondrop() tak:

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

A potem mogę to sprawdzić przez budowanie fałszywego obiekt zdarzenia i przekazania go do metody ondrop.

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