html5拖放FOR MOBILE

我在w3schools上发现这个代码用于拖放，它可以在桌面上运行，但不适用于移动设备。

我需要修改什么才能识别触摸？

    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }    
Drag the W3Schools image into the rectangle:
 
 
    

Answer 1

大多数移动设备不会侦听绑定到DOM的拖动事件。 我建议使用touchmove事件以及随之而来的事件。 它看起来像：

选项1

        
Drag the W3Schools image into the rectangle:
 
 
     

handleStart，handleEnd等是从事件触发的回调，您可以在其中处理触摸事件。

如果你不想对触摸事件做所有繁重的工作，那么我会推荐一个像JQuery Touch Punch这样的库。 我已经使用过了，它在iOS上运行得很好。

这是图书馆的链接，您还可以在自己的移动设备中测试其性能： http ： //touchpunch.furf.com/

选项2（更好的选项） JQuery Touch打孔包含如下：

在您的页面上包含jQuery和jQuery UI。

   // Download this from the link above