如何使用jQuery的.trigger(’dragstart’)来实现HTML5的拖放function.setData / .getData
当使用jQuery的.trigger(’dragstart’)来触发具有属性ondragstart =“drag(event)”的元素上的函数时,你如何在触摸设备上拖放HTML5 .setData / .getData?**
示例流程:
- 用户使用touchmove事件拖动元素
- element以下两个属性:
- .bind(’touchmove’,function(event){$(this).trigger(’dragstart’);});
- ondragstart = “拖动(事件)”
- drag(event)尝试使用event.dataTransfer.setData(“Text”,event.target.id);
- 结果是以下错误。
- “未捕获的TypeError:无法读取未定义的属性’setData’”
对于鼠标事件ondragstart,拖动(事件)函数中的.setData / .getData调用工作正常。 但是,当通过.trigger()触发ondragstart时,.setData / .getData方法无法正常工作并返回错误
尝试拖动订单时,为什么会出现以下错误; 以及如何解决?**
“未捕获的TypeError:无法读取未定义的属性’setData’”
请不要指向使用TouchPunch等.js库。
我正在尝试绑定’touchmove’事件来触发拖动(事件)并提供相同的.setData / .getDatafunction,该function可用于鼠标拖动触发事件。
—> jsFiddle Link <—
HTML:
Order Queue
Johnny Cash Order Number: 100 101 Johnny Cash 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"); }
请参阅jquery html 5 dragstart .on(’dragstart’,function(e){})e.dataTransfer.setData()不起作用
使用event.originalEvent.dataTransfer
可以解决问题
试试这个
HTML
CSS
#draggable {width:50px;height:50px;background-color:#f00;position:absolute}
HTML5触摸事件处理程序
var draggable = document.getElementById('draggable'); draggable.addEventListener('touchmove', function(event) { var touch = event.targetTouches[0]; // Place element where the finger is draggable.style.left = touch.pageX-25 + 'px'; draggable.style.top = touch.pageY-25 + 'px'; event.preventDefault(); }, false);
谢谢
我在这里尝试做的事是不可能的。 我不记得我在哪里找到了文档,但是我得出的结论是,当通过HTML5拖放方法设置/获取数据时,触发.setData的事件很多都是真正的鼠标拖动以便传输数据。 由于安全限制,另一个事件无法触发拖动事件并成功.setData。
我可能不正确,但对于其他尝试相同的人…我建议找另一种方法。 我个人重写了代码以完全删除混合中的HTML5拖放。 这是一条不愉快的道路。 :d