拖放 Javascript 在移动设备上不起作用答案

【问题标题】：Drag and Drop Javascript not working on Mobile Devices拖放 Javascript 在移动设备上不起作用
【发布时间】：2017-01-30 12:28:51
【问题描述】：

Tutorial for HTML5 drag&drop - sortable list

但该脚本无法在移动设备上运行。我尝试了 sortable.js 和插件。所有人都不适用于项目。这对我有帮助。但移动设备工作正常

<ul>
  <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Apples</li>
  <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Oranges</li>
  <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Bananas</li>
  <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Strawberries</li>
</ul>
<script type="text/javascript">
  var source;

  function isbefore(a, b) {
    if (a.parentNode == b.parentNode) {
      for (var cur = a; cur; cur = cur.previousSibling) {
        if (cur === b) { 
          return true;
        }
      }
    }
    return false;
  } 

  function dragenter(e) {
    if (isbefore(source, e.target)) {
      e.target.parentNode.insertBefore(source, e.target);
    }
    else {
      e.target.parentNode.insertBefore(source, e.target.nextSibling);
    }
  }

  function dragstart(e) {
    source = e.target;
    e.dataTransfer.effectAllowed = 'move';
  }

</script>

【问题讨论】：

你应该试试Jquery touch punch它只是为此而制作的。
@SorangwalaAbbasali 仅用于可拖动？剩下的这些js会起作用吗？
@SorangwalaAbbasali 我不确定.. jquery touch punch 只支持 jQuery ui 的拖放.. 据我所知..
试试我在我的应用程序中使用的它，它在触摸手机上效果很好
@SorangwalaAbbasali 我可以使用raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/… 这个链接，比如<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script> 我的页面顶部。对吗？

标签： javascript mobile draggable

【解决方案1】：

您的问题的答案（不使用 jQuery 或其他库）是因为某些移动设备不监听拖动事件。

看看这个问题，我相信它和你有同样的问题。

html5 drag and drop FOR MOBILE

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

 <!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>

【讨论】：