Drag and Drop Javascript not working on Mobile Devices

问题

Tutorial for HTML5 drag&drop - sortable list

But the Script not working on Mobile Devices. i was tried sortable.js and plugin. all are not working for project. This helped me . But mobile device are working

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

回答1:

The answer of your question (without using jQuery or other libraries) is because some mobile devices do not listen to drag events.

Take a look at this question which I believe shares the same problem as you.

html5 drag and drop FOR MOBILE

Most mobile devices do not listen to the drag events that are bound to the DOM. I would recommend using the touchmove event and the events that go along with with it. It would look something like:

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

来源：https://stackoverflow.com/questions/41935975/drag-and-drop-javascript-not-working-on-mobile-devices

标签

javascript

mobile

draggable