dataTransfer is null when creating drag event programmatically

Question

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.

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

found another thread relevant: https://stackoverflow.com/questions/61376278/simulate-a-3-pixel-drag-on-draggable-elem — shailendra, Jan 07 '21 at 20:30

score 6 · Answer 1 · edited Dec 18 '17 at 01:26

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:

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

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

score 2 · Answer 2 · answered Jul 17 '18 at 22:34

2

Looks like it can work like this:

const dataTransfer = new DataTransfer;
dataTransfer.setData("data", '1');
cell.dispatchEvent(new DragEvent('drop', { dataTransfer: dataTransfer }));

answered Jul 17 '18 at 22:34

Oleg V

275
2
12

Tested with Chrome, but this method does not fire dragstart/drop event. – allenhwkim Nov 28 '18 at 01:11

dataTransfer is null when creating drag event programmatically

2 Answers2

Linked