正如标题，我试图在 JavaScript 中模拟 HTML5 拖放事件。
我研究了 jquery.ui.simulate 以及模拟功能here https://stackoverflow.com/questions/6157929/how-to-simulate-mouse-click-using-javascript。两者似乎都可以通过模拟与 jQuery UI 对象一起使用的 mousedown、mousemove 和 mouseup 来模拟拖放。
但是页面中的拖/放事件拖放演示站点 http://html5demos.com/drag#似乎无法使用相同的方法进行模拟。触发 mousedown 似乎不会触发 Dragstart HTML5 事件。
有没有办法根据模拟 mousedown/mousemove/等来触发 Dragstart 事件，或者有没有办法直接模拟 Dragstart（然后放下）事件？
我尝试修改SO 上找到的模拟函数 https://stackoverflow.com/questions/6157929/how-to-simulate-mouse-click-using-javascript添加 HTML5 Dragstart 事件，以便我可以在演示页面上尝试类似以下内容
simulate( document.querySelector('#three'), 'dragstart')
但我收到错误，因为我不确定如何在模拟的 Dragstart 事件上正确创建 dataTransfer 对象。
基本上，我会接受任何可以让我将元素“三”拖动到“bin”元素的答案演示拖放页面 http://html5demos.com/drag#使用 jquery.ui.simluate （或其他库）或使用修改版本模拟功能 https://stackoverflow.com/questions/6157929/how-to-simulate-mouse-click-using-javascript我在SO上找到的。
最好的选择是重新创建一个假事件对象。
在我的拖放文件上传库的单元测试中（Droplit https://github.com/braznaavtrav/DroplitJS，无耻的插件），我一直用 jQuery 来做这个Event https://api.jquery.com/category/events/event-object/方法。在我的源代码中，我设置了 drop 事件侦听器element.ondrop()像这样：
element.ondrop = function(e) {
e.preventDefault();
readFiles(e.dataTransfer.files);
};
然后我可以通过构建一个假事件对象并将其传递到ondrop method.
element.ondrop($.Event('drop', {dataTransfer: { files: [] }}));
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
