如何使用jQuery的.trigger（'dragstart'）来实现HTML5的拖放功能.setData / .getData

Question

使用jQuery的.trigger（＆＃39; dragstart＆＃39;）来触发具有属性ondragstart =＆＃34的元素上的函数;拖动（事件）＆＃34; ，你如何在触摸设备上拖放HTML5 .setData / .getData？**

示例流程：

• 用户使用touchmove事件拖动元素
• 元素以下两个属性：
  • .bind（＆＃39; touchmove＆＃39;，功能（事件）{$（this）.trigger（＆＃39; dragstart＆＃39;）;}）;
  • ondragstart =＆＃34;拖动（事件）＆＃34;
• drag（event）尝试使用event.dataTransfer.setData（＆＃34; Text＆＃34;，event.target.id）;
• 结果是以下错误。
• ＆＃34;未捕获的TypeError：无法读取属性＆＃39; setData＆＃39;未定义＆＃34;

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

尝试拖动订单时，为什么会出现以下错误;以及如何修复它？**

  

＆＃34;未捕获的TypeError：无法读取属性＆＃39; setData＆＃39;未定义＆＃34;

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

我试图绑定＆＃39; touchmove＆＃39;触发拖动（事件）的事件，并提供可用于鼠标拖动触发事件的.setData / .getData功能。

---＆gt; jsFiddle Link＆lt; ---

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

Answer 1

请参阅jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() doesn't work

使用event.originalEvent.dataTransfer可以解决问题

Answer 2

试试这个

HTML

<div id="draggable" ></div>

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

谢谢

Answer 3

我在这里尝试做的事是不可能的。我无法记住我找到文档的位置，但是我得出的结论是，当通过HTML5拖放方法设置/获取数据时，触发.setData的事件很多都是真正的鼠标拖动以便传输数据。由于安全限制，另一个事件无法触发拖动事件并成功.setData。

我可能不正确，但对于其他尝试相同的人......我建议找另一种方法。我个人重写了代码以完全删除混合中的HTML5拖放。这是一条不愉快的道路。 ：d