如何在javascript中模擬HTML5拖放事件？

Question

作為標題，我試圖在javascript中模擬HTML5拖放事件。

我查看了jquery.ui.simulate以及這里的模擬函數。 兩者似乎都能夠通過模擬與jQuery UI對象一起使用的mousedown，mousemove和mouseup來模擬拖放。

但是像拖放演示站點這樣的頁面中的拖放事件似乎不能使用相同的方法進行模擬 。 觸發mousedown似乎沒有觸發dragstart HTML5事件。

有沒有辦法讓模擬mousedown / mousemove / etc啟動dragstart事件，還是有辦法直接模擬dragstart（然后刪除）事件？

我已經嘗試修改SO上的模擬功能來添加HTML5 dragstart事件，所以我可以在演示頁面上嘗試類似下面的內容

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

但是我收到錯誤，因為我不確定如何正確地在模擬的dragstart事件上創建dataTransfer對象。

基本上，我會接受任何答案，讓我可以使用jquery.ui.simluate（或其他庫）或使用修改版本的方法將元素'three' 拖動到演示拖放頁面中的'bin'元素模擬我在SO上找到的功能 。

Answer 1

最好的辦法是重新創建一個虛假的事件對象。

在我的拖放文件上傳庫（ Droplit ，無恥插件）的單元測試中，我一直在使用jQuery的Event方法。 在我的源代碼中，我使用element.ondrop()設置我的drop事件監聽器，如下所示：

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

然后我可以通過構建一個假的事件對象並將其傳遞給ondrop方法來測試它。

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

Answer 2

你可以嘗試這個。 它使用原生HTML5事件，沒有jQuery

https://github.com/Photonios/JS-DragAndDrop-Simulator