javascript - 如何在使用 jQuery 的 .trigger ('dragstart' 时使用 .setData/.getData 来实现 HTML5 的拖放功能

Question

当使用 jQuery 的 .trigger('dragstart') 触发具有属性 ondragstart="drag(event)"的元素上的函数时，如何使用 .setData/.getData 实现 HTML5 在触摸设备上的拖放操作？ **

示例流程:

• 用户通过 touchmove 事件拖动元素
• 元素具有以下两个属性:
  • .bind('touchmove', function(event){$(this).trigger('dragstart');});
  • ondragstart="拖动(事件)"
• 拖动(事件)尝试使用 event.dataTransfer.setData("Text", event.target.id);
• 结果是下面的错误。
• “未捕获的类型错误:无法读取未定义的属性‘setData’”

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

为什么在尝试拖动订单时出现以下错误；我该如何解决？**

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

请不要直接使用 TouchPunch 等 .js 库

我正在尝试绑定(bind)“touchmove”事件以触发拖动(事件)并提供可用于鼠标拖动触发事件的相同 .setData/.getData 功能。

---> jsFiddle Link <---

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 就可以了