Question

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

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

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

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

在控制台中查看错误

但是如果在尝试拖动时调用此事件，则该属性可用且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>

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

1 个答案: