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

Question

我正在实现一个功能，其中 dataTransfer 中的数据将在 dragstart 事件上设置，当用户尝试拖动其他元素时将手动调用该事件。所以我使用这个 jQuery 来触发 dragstart 事件 -

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

这完美地调用了事件，但是缺少 jQuery Event 的 originalEvent 属性。因此，我无法在数据传输中设置数据。

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

See error in console

但是，如果在尝试拖动时调用此事件，则该属性可用并且 dataTransfer 工作正常。

这是一个fiddle我所面临的问题。

如有任何帮助，我们将不胜感激。

Answer 1

您必须在 Event 上传递 dataTransfer 对象，请参阅下面的代码片段

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>