用于移动的html5拖放[重复]答案

【问题标题】：html5 drag and drop FOR MOBILE [duplicate]用于移动的html5拖放[重复]
【发布时间】：2014-01-22 13:06:19
【问题描述】：

我在 w3schools 上找到了这个用于拖放的代码，它适用于桌面，但不适用于移动设备。

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

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

【问题讨论】：

这是一个不同的问题，它有更好的答案，因为它解释了为什么拖放在移动设备上不起作用。
你能正确缩进你的代码吗？主题是相关的，但我不能 +1

标签： javascript jquery html mobile drag-and-drop

【解决方案1】：

大多数移动设备不会监听绑定到 DOM 的拖动事件。我会推荐使用 touchmove 事件和随之而来的事件。它看起来像：

选项 1

 <!DOCTYPE HTML>
 <html>
 <head>
 <style type="text/css">
       #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
 </style>
 </head>
 <body>

 <p>Drag the W3Schools image into the rectangle:</p>

 <div id="div1"></div>
 <br>
 <img id="drag1" src="img_logo.gif width="336" height="69">

 <script type="text/javascript">
  var el = document.getElementById('drag'); 

  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleEnd, false);
  el.addEventListener("touchmove", handleMove, false);

  function handleStart(event) {
      // Handle the start of the touch
  }

  // ^ Do the same for the rest of the events

</script>
</body>
</html>

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

如果您不想完成触摸事件方面的所有繁重工作，那么我建议您使用 JQuery Touch Punch 之类的库。我用过它，它在 iOS 上运行良好。

这里是库的链接，您还可以在自己的移动设备上测试它的性能：http://touchpunch.furf.com/

选项 2（更好的选项） 像这样包含 JQuery Touch 打孔器：

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

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

// Download this from the link above
<script src="jquery.ui.touch-punch.min.js"></script>

<script>
    $('#drag1').draggable();
    $( "#div1" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "isDropped" )
            .html( "Dropped!" );
        }
      });
    });

</script>

【讨论】：

确保您的脚本标签位于文档的末尾，以便在创建 DOM 后绑定事件。也不要忘记为每个触摸事件创建实际的回调。这样做的缺点是您必须手动处理 drop 事件。如果我是你，我会尝试我在答案末尾发布的 JQuery Touch Punch Library。
我已经在 Android 设备上测试了您与 Firefox 和 Chrome 的链接，但它不起作用
@AlecMoore 您的答案不起作用。适用于移动设备和所有
@crock 这个答案是 3 年前选择的，可能已经过时了。此外，如果您正在寻求帮助，“不工作”并不是很有帮助的回答。描述您尝试过的内容、预期结果并将其与您观察到的实际结果进行比较。
我发现这个库很有帮助，它只使用你现有的 drop、dragenter 事件并在触摸设备上启用拖放 github.com/Bernardo-Castilho/dragdroptouch