小编ste*_*eat的帖子

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

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

示例流程:

  • 用户使用touchmove事件拖动元素
  • element以下两个属性:
    • .bind('touchmove',function(event){$(this).trigger('dragstart');});
    • ondragstart = "拖动(事件)"
  • drag(event)尝试使用event.dataTransfer.setData("Text",event.target.id);
  • 结果是以下错误.
  • "未捕获的TypeError:无法读取未定义的属性'setData'"

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

尝试拖动订单时,为什么会出现以下错误; 以及如何解决?**

"未捕获的TypeError:无法读取未定义的属性'setData'"

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

我正在尝试绑定'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> …
Run Code Online (Sandbox Code Playgroud)

javascript jquery html5 drag-and-drop touch

3
推荐指数
1
解决办法
5992
查看次数

标签 统计

drag-and-drop ×1

html5 ×1

javascript ×1

jquery ×1

touch ×1