Question

37

html5 drag and drop FOR MOBILE

rated 0 times [ 43] [ 6] / answers: 1 / hits: 65319 / 11 Years ago, sat, january 4, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nestorjarettg

Add To Favorites

Follow

Total Points: 451

Total Questions: 108

Total Answers: 108

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

nestorjarettg questions

1 Discord Bot Not Playing Audio discord.js v13

Sat, Sep 25, 21, 00:00, 3 Years ago

1 Access and modify react context from jest test with react testing library

Wed, Sep 9, 20, 00:00, 4 Years ago

1 Uncaught ReferenceError: _ is not defined at < anonymous>:1:1 (Not jQuery)

Sun, Feb 16, 20, 00:00, 4 Years ago

1 403 Access Error returned from Browser possibly caused by AWS

Wed, Jan 29, 20, 00:00, 4 Years ago

1 Uncaught TypeError: Class extends value #< Object> is not a constructor or null

Mon, Jan 13, 20, 00:00, 4 Years ago

View All

answered 11 Years ago declanm · Accepted Answer

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>