1

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>

7
  • 2
    You should try Jquery touch punch it is made for this only.
    – Sorangwala Abbasali
    Commented Jan 30, 2017 at 12:30
  • @SorangwalaAbbasali only for draggable ? rest of these js will work?
    – Crock
    Commented Jan 30, 2017 at 12:33
  • @SorangwalaAbbasali Im not sure.. Jquery touch punch is only support the drag and drop of jQuery ui.. As much as I know..
    – Mosh Feu
    Commented Jan 30, 2017 at 12:34
  • Give it a try i used in my applications and it works great on touch phones
    – Sorangwala Abbasali
    Commented Jan 30, 2017 at 12:34
  • @SorangwalaAbbasali Can i Use raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/… this link like <script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script> top of my page . is correct?
    – Crock
    Commented Jan 30, 2017 at 12:35

1 Answer 1

Reset to default
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>
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.