如何手動調用事件時使用event.dataTransfer設置數據？

Question

我正在實現一個功能，其中dataTransfer中的數據將設置在dragstart事件上，當用戶嘗試拖動某個其他元素時將手動調用該事件。所以我用這個jQuery的觸發事件dragstart -

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

這調用事件完美，但jQuery的事件originalEvent屬性缺失。因此，我無法在數據傳輸中設置數據。在控制檯

但是，如果試圖拖動時調用該事件，屬性信息，並將數據傳遞工作得很好

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

看到錯誤。

這是我面臨的fiddle。

任何幫助，將不勝感激。由於

Answer 1

你要通過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>