手动调用事件时如何使用 event.dataTransfer 设置数据？

Question

I am implementing a functionality where data in dataTransfer will be set on dragstart event which will be invoked manually when user tries to drag some other element. So I used this jQuery to trigger dragstart event -

$(elem).trigger('dragstart');

This invokes the event perfectly but originalEvent property of jQuery Event is missing. Hence, I am unable to set Data in data transfer.

event.originalEvent.dataTransfer.setData('text','aa');   //Here comes the error

See error in console

But if this event is invoked when trying to drag, the property is available and dataTransfer works just fine.

Here's a fiddle of what I am facing.

Any help would be appreciated.

Answer 1

You have to pass the dataTransfer object on the Event , see the below snippet

 function fireCustomEvent(eventName, element, data) { 'use strict'; var event; data = data || {}; if (document.createEvent) { event = document.createEvent("HTMLEvents"); event.initEvent(eventName, true, true); } else { event = document.createEventObject(); event.eventType = eventName; } event.eventName = eventName; event = $.extend(event, data); if (document.createEvent) { element.dispatchEvent(event); } else { element.fireEvent("on" + event.eventType, event); } } jQuery.event.props.push('dataTransfer'); var elem = document.getElementById('square'); $(elem).on('dragstart', function (event) { alert('addEventListener'); debugger; event.originalEvent.dataTransfer.setData('text','aa'); }); fireCustomEvent('dragstart',elem,{dataTransfer:new DataTransfer()});

 div { width: 100px; height: 100px; border: 1px groove black; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="square" draggable=true></div>