14

I found this code on w3schools for drag and drop, which works on a desktop, but not mobile devices.

What do I need to modify so that it recognizes touch?

<!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>
SnowboardBruin
  • 3,645
  • 8
  • 36
  • 59

1 Answers1

17

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>
radbyx
  • 9,352
  • 21
  • 84
  • 127
Alec Moore
  • 1,155
  • 2
  • 10
  • 20
  • 1
    Mak sure your script tag is at the end of the document so it binds the events after the DOM is created. Also don't forget to create the actual callback for each touch event. The disadvantage of this is that you have to manually handle the drop event. If I were you, I would try out the JQuery Touch Punch Library that I posted at the end of the answer. – Alec Moore Jan 04 '14 at 23:59
  • 2
    I've tested your link with both Firefox and Chrome in an Android device and it doesn't work – OMA May 22 '14 at 09:26
  • @AlecMoore Your Answer not working. for mobile device and all – Crock Jan 31 '17 at 03:54
  • 7
    @crock This answer was selected 3 years ago and is likely outdated. Also, 'not working' is not very helpful response if you are looking for assistance. Describe what you've tried, the expected result and compare it to the actual result you observe. – Alec Moore Feb 01 '17 at 23:32
  • I found this library helpful, it just uses your existing drop, dragenter events and enables drag/drop on touch devices https://github.com/Bernardo-Castilho/dragdroptouch – Andrew Schultz Aug 24 '21 at 22:31
  • @AndrewSchultz i have tried this library, it made image draggable but i am not able to drop is success fully. i am using Fabric.js for my canvas editing. – Najam Us Saqib Dec 21 '22 at 11:37