web-dev-qa-db-fra.com

glisser-déposer html5 POUR MOBILE

J'ai trouvé ce code sur w3schools pour le glisser-déposer, qui fonctionne sur un ordinateur de bureau, mais pas sur des appareils mobiles.

Que dois-je modifier pour qu'il reconnaisse le toucher?

<!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>
javascriptjqueryhtmlmobiledrag-and-drop
13
SnowboardBruin

La plupart des appareils mobiles n'écoutent pas les événements de glissement liés au DOM. Je recommanderais d'utiliser l'événement touchmove et les événements qui l'accompagnent. Cela ressemblerait à quelque chose comme:

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>

Le handleStart, le handleEnd, etc. sont vos rappels qui sont déclenchés à partir de l'événement, où vous pouvez gérer l'événement tactile.

Si vous ne voulez pas faire tout le travail lourd en ce qui concerne les événements tactiles, je recommanderais une bibliothèque telle que JQuery Touch Punch. Je l'ai utilisé et cela fonctionne très bien sur iOS.

Voici un lien vers la bibliothèque où vous pouvez également tester ses performances sur votre propre appareil mobile: http://touchpunch.furf.com/

OPTION 2 (MEILLEURE OPTION) JQuery Touch punch est inclus comme suit:

Incluez jQuery et jQuery UI sur votre 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>
14
Alec Moore