dragstart js_javascript – 如何使用jQuery的.trigger(‘dragstart’)来实现HTML5的拖放功能.setData / .getData...

当使用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);

>结果是以下错误.

>“未捕获的TypeError：无法读取未定义的属性’setData’”

对于鼠标事件ondragstart,拖动(事件)函数中的.setData / .getData调用工作正常.但是,当通过.trigger()触发ondragstart时,.setData / .getData方法无法正常工作并返回错误

尝试拖动订单时,为什么会出现以下错误;以及如何解决？**

“Uncaught TypeError: Cannot read property ‘setData’ of undefined”

请不要指向使用TouchPunch等.js库.

我正在尝试绑定’touchmove’事件以触发拖动(事件)并提供可用于鼠标拖动触发事件的相同.setData / .getData功能.

—> jsFiddle Link< --- HTML：

Order Queue

Johnny Cash

Order Number: 100

101

Johnny Cash

Queue Bar

---

Test Log

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");

}