如何在使用jQuery的.trigger('dragstart')进行HTML5拖放功能时使用.setData/.getData？

Question

当使用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); - 结果是以下错误。 - "Uncaught TypeError: Cannot read property 'setData' of undefined"

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

我在尝试拖动订单时为什么会出现以下错误？如何修复它？

"Uncaught TypeError: Cannot read property 'setData' of undefined"

请避免使用TouchPunch等.js库。

我正在尝试绑定“touchmove”事件以触发拖动（event），并提供与鼠标拖动触发事件相同的.setData/.getData功能。

--->jsFiddle链接 <---

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

- stev0thegreat

Answer 1

参见jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData()不起作用

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

- loother

---

哦哦，等我回到电脑前我得测试一下。很有道理。谢谢你的回复！ - holler

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

谢谢

- it's me

---

感谢您的回复。也许我的问题没有表达清楚。主要问题不是拖动对象，而是问题是：如何正确使用ev.dataTransfer.setData()方法在事件上，最初由一个具有ondragstart="drag(event)"的DOM元素触发，通过使用jQuery的.trigger('dragstart')方法来触发drag(event)函数？ - holler

请支持升级以获得声望。 - it's me

Answer 3

我在这里尝试做的事情是不可能的。我记不清我在哪里找到了文档，但我的结论是，当通过HTML5拖放方法设置/获取数据时，触发.setData的事件必须是真正的鼠标拖动，才能传输数据。由于安全限制，其他事件无法触发拖动事件并成功地进行.setData。

我可能是错误的，但对于任何试图尝试相同操作的人...我建议寻找另一种方法。我个人重写了代码，完全将HTML5拖放从中移除。这是一条不愉快的路要走。:D

- holler