![](/img/trans.png)
[英]Html5 Drag and Drop, Mousewhell event is not fired after dragstart
[英]How to .setData/.getData when using jQuery's .trigger('dragstart') for HTML5's drag and drop functionality
對於鼠標事件ondragstart,拖動(事件)函數中的.setData / .getData調用工作正常。 但是,當通過.trigger()觸發ondragstart時,.setData / .getData方法無法正常工作並返回錯誤
“未捕獲的TypeError:無法讀取未定義的屬性'setData'”
請不要指向使用TouchPunch等.js庫。
我正在嘗試綁定'touchmove'事件以觸發拖動(事件)並提供可用於鼠標拖動觸發事件的相同.setData / .getData功能。
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()不起作用
使用event.originalEvent.dataTransfer
可以解決問題
試試這個
<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);
謝謝
我試圖在這里做的事是不可能的。 我不記得我在哪里找到了文檔,但是我得出的結論是,當通過HTML5拖放方法設置/獲取數據時,觸發.setData的事件很多都是真正的鼠標拖動以便傳輸數據。 由於安全限制,另一個事件無法觸發拖動事件並成功.setData。
我可能不正確,但對於嘗試相同的其他人...我建議找另一種方法。 我個人重寫了代碼以完全刪除混合中的HTML5拖放。 這是一條不愉快的道路。 :d
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.