[英]How to .setData/.getData when using jQuery's .trigger('dragstart') for HTML5's drag and drop functionality
For mouse event ondragstart, .setData/.getData call in the drag(event) function works fine. 对于鼠标事件ondragstart,拖动(事件)函数中的.setData / .getData调用工作正常。 However, when firing the ondragstart via .trigger() the .setData/.getData methods do not work properly and an error is returned
但是,当通过.trigger()触发ondragstart时,.setData / .getData方法无法正常工作并返回错误
"Uncaught TypeError: Cannot read property 'setData' of undefined"
“未捕获的TypeError:无法读取未定义的属性'setData'”
Please refrain from directing towards using a .js library such as TouchPunch etc. 请不要指向使用TouchPunch等.js库。
I'm trying to bind the 'touchmove' event to fire off the drag(event) and provide the same .setData/.getData functionality that is available for the mouse drag triggered event. 我正在尝试绑定'touchmove'事件以触发拖动(事件)并提供可用于鼠标拖动触发事件的相同.setData / .getData功能。
HTML: 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: 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");
}
See jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() doesn't work 请参阅jquery html 5 dragstart .on('dragstart',function(e){})e.dataTransfer.setData()不起作用
using the event.originalEvent.dataTransfer
does the trick 使用
event.originalEvent.dataTransfer
可以解决问题
Try this 试试这个
<div id="draggable" ></div>
#draggable {width:50px;height:50px;background-color:#f00;position:absolute}
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);
Thank you 谢谢
What I was trying to do here is impossible. 我试图在这里做的事是不可能的。 I can't remember where I found the documentation, however the conclusion I arrived is that when setting/getting data via the HTML5 drag and drop method the event that fires the .setData much be a true mouse drag in order to transfer data.
我不记得我在哪里找到了文档,但是我得出的结论是,当通过HTML5拖放方法设置/获取数据时,触发.setData的事件很多都是真正的鼠标拖动以便传输数据。 Another event cannot trigger a drag event and successfully .setData due to security restrictions.
由于安全限制,另一个事件无法触发拖动事件并成功.setData。
I maybe incorrect, but for anyone else attempting the same... I suggest finding another method. 我可能不正确,但对于尝试相同的其他人...我建议找另一种方法。 I personally rewrote the code to entirely remove HTML5 drag and drop from the mix.
我个人重写了代码以完全删除混合中的HTML5拖放。 It was an unhappy road to go down.
这是一条不愉快的道路。 :D
:d
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.