当使用jQuery的.trigger('dragstart')触发一个带有属性ondragstart="drag(event)"的元素上的函数时,如何在触摸设备上为HTML5的拖放设置.setData/.getData?
示例流程:
- 用户使用touchmove事件拖动元素 - 元素具有以下两个属性: - .bind('touchmove', function(event){$(this).trigger('dragstart');}); - ondragstart="drag(event)" - drag(event)尝试使用event.dataTransfer.setData("Text", event.target.id); - 结果是以下错误。 - "Uncaught TypeError: Cannot read property 'setData' of undefined"
对于鼠标事件ondragstart,在drag(event)函数中的.setData/.getData调用正常工作。但是,通过.trigger()触发ondragstart时,.setData/.getData方法无法正常工作,并返回错误。
我在尝试拖动订单时为什么会出现以下错误?如何修复它?
"Uncaught TypeError: Cannot read property 'setData' of undefined"
请避免使用TouchPunch等.js库。
我正在尝试绑定“touchmove”事件以触发拖动(event),并提供与鼠标拖动触发事件相同的.setData/.getData功能。
示例流程:
- 用户使用touchmove事件拖动元素 - 元素具有以下两个属性: - .bind('touchmove', function(event){$(this).trigger('dragstart');}); - ondragstart="drag(event)" - drag(event)尝试使用event.dataTransfer.setData("Text", event.target.id); - 结果是以下错误。 - "Uncaught TypeError: Cannot read property 'setData' of undefined"
对于鼠标事件ondragstart,在drag(event)函数中的.setData/.getData调用正常工作。但是,通过.trigger()触发ondragstart时,.setData/.getData方法无法正常工作,并返回错误。
我在尝试拖动订单时为什么会出现以下错误?如何修复它?
"Uncaught TypeError: Cannot read property 'setData' of undefined"
请避免使用TouchPunch等.js库。
我正在尝试绑定“touchmove”事件以触发拖动(event),并提供与鼠标拖动触发事件相同的.setData/.getData功能。
--->jsFiddle链接 <---
HTML:<div class="l-col-container">
<section id="1130" class="orderqueue">
<h1>Order Queue</h1>
<div class="orderList">
<div id="100" class="order" timeslot="1130" ordernumber="100" draggable="true" ondragstart="drag(event)">
<div class="order-name">Johnny Cash</div>
<div class="order-num">Order Number: 100</div>
</div>
<!-- /order -->
<div id="101" class="order" timeslot="1130" ordernumber="101" draggable="true" ondragstart="drag(event);">
<div class="order-num">101</div>
<div class="order-name">Johnny Cash</div>
</div>
<!-- /order -->
</div>
<!-- /orderlist -->
</section>
<div class="queuebar">
<h2>Queue Bar</h2>
<hr/>
<div class="queuebar-dropzone"></div>
</div>
<div id="testsensor">
<h2>Test Log</h2>
<p id="testsensor-output"></p>
</div>
</div>
<!-- /l-col-container -->
JavaScript:
var orders = $('.order');
var testelement = document.getElementById('testsensor-output');
var index = 0;
orders.each(function () {
$(this).bind('touchmove', function (evt) {
index++;
testelement.innerHTML = index + ' dragstart fired';
console.log('dragstart fired');
$(this).trigger('dragstart');
});
$(this).bind('dragstart', function(event){
drag(event);
});
});
function drag(ev) {
console.log(ev);
var obj = $('#' + ev.target.id);
ev.dataTransfer.setData("Text", ev.target.id);
var data = ev.dataTransfer.getData("Text");
}