HTML Drag and Drop on Mobile Devices

HTML Drag And Drop On Mobile Devices

jQuery UI Touch Punch just solves it all.

It's a Touch Event Support for jQuery UI. Basically, it just wires touch event back to jQuery UI.
Tested on iPad, iPhone, Android and other touch-enabled mobile devices.
I used jQuery UI sortable and it works like a charm.

http://touchpunch.furf.com/

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:

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

The handleStart, handleEnd, etc. are your callbacks that are fired from the event, which is where you can handle touch event.

If you don't want to do all of the heavy lifting as far as the touch events, then I would recommend a library such as JQuery Touch Punch. I've used it and it works very well on iOS.

Here's a link to the library where you can also test out its performance in your own mobile device: http://touchpunch.furf.com/

OPTION 2 (BETTER OPTION)
JQuery Touch punch is included like so:

Include jQuery and jQuery UI on your page.

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

HTML5 Drag & Drop for Mobile

Unfortunately Drag and Drop is not currently supported by any mobile browsers except Internet Explorer Mobile 10 onwards and a single deprecated Presto version of Opera (which has now been replaced by Webkit based versions). See http://caniuse.com/#feat=dragndrop

The best solution would be to detect support for drag and drop (ensuring that this does not give you false positives in mobile versions of browsers that do support the API) and then use JavaScript to polyfill on mobile devices. This will also help provide support in legacy browser versions that pre-date native support for drag and drop.

You can use the excellent YepNope conditional loading library to run the test and then conditionally load one or more scripts to provide JavaScript support for drag and drop, or you could use Modernizr to both carry out the test and load the scripts.

html 5 drag and drop not working on mobile screen

Some mobile devises don't listen to the drag event. To solve that you must use the touch event touchstart, touchend, touchcancel, touchleave, touchmove TouchEvent - Web APIs

// get The element on which to attach the event var btn = document.querySelector('.btn');
// attaching each event listenerbtn.addEventListener('touchstart', function(){ console.log('btn touched');})btn.addEventListener('touchend', function(){ console.log('btn leaved');})btn.addEventListener('touchmove', function(){ console.log('btn leaved');})btn.addEventListener('touchleave', function(){ console.log('btn moving end');})btn.addEventListener('touchcancel', function(){ console.log('btn moving cancel');})

<button class="btn">test</button>

HTML Drag and Drop on Mobile Devices