以编程方式创建拖动事件时,dataTransfer 为空

2022-01-11 00:00:00 drag-and-drop html data-transfer


我正在尝试创建一个 dragEvent 并在 Chrome 上使用此代码以编程方式触发它:


I am trying to create a dragEvent and fire it programmatically using this code on Chrome:

var ev = document.createEvent("MouseEvents");
ev.initEvent("dragstart");

然后以这种方式触发它:

and then fire it this way:

element.dispatchEvent(ev);

元素具有可拖动属性.

The element has draggable attribute.

事件已成功发送.但是,在触发事件时 - dataTransfer 对象为空.即使我尝试手动将其设置为工作 dataTransfer 对象 - 它仍然保持为空.

The event was dispatched successfully. However on the event being fired - the dataTransfer object is null. Even when I try to set it manually to a working dataTransfer object - it still stays null.

有什么想法吗?
谢谢

Any ideas?
Thanks

推荐答案

很遗憾,目前似乎没有这样的方法可以通过编程方式创建 DataTransfer 对象.HTML5 拖放界面的描述说:

Unfortunately, it seems that there is no such a way to create a DataTransfer object programmatically at the moment. The description of HTML5 drag and drop interface says:

虽然为了与其他事件接口保持一致,DragEvent 接口有一个构造函数,但并不是特别有用.特别是,无法从脚本创建有用的 DataTransfer 对象,因为 DataTransfer 对象具有在拖放过程中由浏览器协调的处理和安全模型

Although, for consistency with other event interfaces, the DragEvent interface has a constructor, it is not particularly useful. In particular, there's no way to create a useful DataTransfer object from script, as DataTransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops

请在此处查看更多详细信息:http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dragevent-and-datatransfer-interfaces

Please check more details here: http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dragevent-and-datatransfer-interfaces

相关文章