当使用jQuery的.trigger（'dragstart'）进行HTML5的拖放功能时，如何使用.setData / .getData

本文介绍了当使用jQuery的.trigger（'dragstart'）进行HTML5的拖放功能时，如何使用.setData / .getData的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

用户拖动元素与touchmove事件

元素包含以下两个属性：

.bind（'touchmove'，function（event）{$这个）.trigger（'dragstart'）;}）;

ondragstart =drag（event）

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

For mouse event ondragstart, .setData/.getData call in the drag(event) function works fine. However, when firing the ondragstart via .trigger() the .setData/.getData methods do not work properly and an error is returned

请不要指示使用.js库，例如TouchPunch等。

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

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.

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

SetData

当使用jQuery的.trigger（'dragstart'）进行HTML5的拖放功能时，如何使用.setData / .getData

问题描述

推荐答案