当使用 jQuery 的 .trigger('dragstart') 触发具有属性 ondragstart="drag(event)"的元素上的函数时,如何使用 .setData/.getData 实现 HTML5 在触摸设备上的拖放操作? **
示例流程:
- 用户通过 touchmove 事件拖动元素
- 元素具有以下两个属性:
- .bind('touchmove', function(event){$(this).trigger('dragstart');});
- ondragstart="拖动(事件)"
- 拖动(事件)尝试使用 event.dataTransfer.setData("Text", event.target.id);
- 结果是下面的错误。
- “未捕获的类型错误:无法读取未定义的属性‘setData’”
对于 ondragstart 鼠标事件,drag(event) 函数中的 .setData/.getData 调用工作正常。但是,当通过 .trigger() 触发 ondragstart 时,.setData/.getData 方法无法正常工作并返回错误
为什么在尝试拖动订单时出现以下错误;我该如何解决?**
"Uncaught TypeError: Cannot read property 'setData' of undefined"
请不要直接使用 TouchPunch 等 .js 库
我正在尝试绑定(bind)“touchmove”事件以触发拖动(事件)并提供可用于鼠标拖动触发事件的相同 .setData/.getData 功能。
---> jsFiddle Link <---
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");
}
最佳答案
参见 jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() doesn't work
使用 event.originalEvent.dataTransfer
就可以了
关于javascript - 如何在使用 jQuery 的 .trigger ('dragstart' 时使用 .setData/.getData 来实现 HTML5 的拖放功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25671377/