How to set Data using event.dataTransfer when event was invoked manually?

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>