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(         


        

Answer 1

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

Answer 2

Looks like it can work like this:

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