Как имитировать события перетаскивания HTML5 в javascript?

Как заголовок, я пытаюсь моделировать событие перетаскивания HTML5 в javascript.

Я просмотрел jquery.ui.simulate, а также функцию моделирования здесь. Оба, похоже, могут быть использованы для одновременного использования перетаскивания путем моделирования mousedown, mousemove и mouseup, который работает с объектами пользовательского интерфейса jQuery.

Но события перетаскивания на таких страницах, как перетащить демонстрационный сайт, похоже, не могут быть имитируемыми с использованием тех же методов. Запуск мультикана, похоже, не запускает событие dragstart HTML5.

Есть ли способ получить события dragstart, которые будут запущены на основе имитации mousedown/mousemove/etc, или есть способ имитировать события dragstart (и затем drop) напрямую?

Я пробовал модифицировать функцию моделирования найденную в SO, чтобы добавить событие dragstart для HTML5, чтобы на демонстрационной странице можно попробовать что-то вроде следующего:

но я получаю сообщение об ошибке, потому что я не уверен, как правильно создать объект dataTransfer на симулированном событии dragstart.

В принципе, я приму любой ответ, который позволил бы мне перетащить элемент "три" в элемент "bin" в демонстрационной странице перетаскивания либо с помощью jquery.ui.simluate(или другой библиотеки), либо с помощью модифицированной версии функции имитировать функцию, которую я нашел на SO.

Ответы

Ответ 1

Лучше всего воссоздать поддельный объект события.

В моих модульных тестах для библиотеки загрузки файлов с перетаскиванием (Droplit, бесстыдной плагин), я делал это с помощью jQuery Event. В моем исходном коде я установил прослушиватель событий для событий с element.ondrop() следующим образом:

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

И затем я могу проверить это, создав поддельный объект события и передав его методу ondrop.

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