jQuery glisser et déposer ne fonctionne pas avec le toucher mobile

Question

J'utilise jQuery drag and drop bibliothèque, mais il fonctionne bien dans les navigateurs Web, mais ne fonctionne pas au toucher mobile. Voici mon html et javascript ..

P.S. Je veux cette valeur pour que je puisse gérer plusieurs boîtes avec des attributs différents, c'est pourquoi je l'ai appelé la fonction de vol stationnaire,

<!-- html --> 

    <div> 
     <ul class="draggable"> 
      <li class="dragme">one</li> 
      <li class="dragme">two</li> 
      <li class="dragme">three</li> 
      <li class="dragme">four</li> 
      <li class="dragme">five</li> 
      <li class="dragme">six</li> 
     </ul> 
    </div> 

<!-- style --> 

ul.draggable {list-style: none; } 
ul.draggable li {display: block; width: 100px; height: 40px; background-color: #000; color: #fff; margin-top: 20px; text-align: center;} 

<!-- javascript --> 

     function drags() { 
      jQuery('.dragme').hover(function() { 
       var dragContent = jQuery(this); 
       jQuery(dragContent).draggable({revert: true}); 
      }); 
     } 
     jQuery(document).ready(function(){ 
      drags(); 
     }); 

J'ai également ajouté cette fonction (ci-dessous) pour permettre toucher à mobile, il fonctionnait bien, mais d'abord, maintenant sa ne fonctionne pas ... je l'avais trouvé ici dans stackoverflow

<!-- touch functions --> 

function touchHandler(event) { 
      var touch = event.changedTouches[0]; 

      var simulatedEvent = document.createEvent("MouseEvent"); 
      simulatedEvent.initMouseEvent({ 
       touchstart: "mousedown", 
       touchmove: "mousemove", 
       touchend: "mouseup" 
      }[event.type], true, true, window, 1, 
        touch.screenX, touch.screenY, 
        touch.clientX, touch.clientY, false, 
        false, false, false, 0, null); 

      touch.target.dispatchEvent(simulatedEvent); 
      event.preventDefault(); 
     } 

     function init() { 
      document.addEventListener("touchstart", touchHandler, true); 
      document.addEventListener("touchmove", touchHandler, true); 
      document.addEventListener("touchend", touchHandler, true); 
      document.addEventListener("touchcancel", touchHandler, true); 
     } 
    // -- call **init()** in document.ready function 

S'il vous plaît aider avec vos réponses

Merci

Answer 1

Tout d'abord, vous devez tout déplacer dans un Anonymous Self-Executing Function.

Ensuite, vous ne devez pas initialiser les éléments déplaçables sur le vol stationnaire. Cela se produit à l'intérieur de la fonction auto-exécutable lorsque la page se charge.

Par défaut, jQuery draggable n'est pas convivial avec les mobiles. Vous devriez également utiliser ceci ... http://touchpunch.furf.com - Il comble les lacunes dans jQueryUI pour faire glisser et déposer mieux sur mobile.

En ajoutant TouchPunch, il fonctionnera automatiquement sur mobile. Aucun code supplémentaire requis. En tant que test, si vous supprimez TouchPunch de jsFiddle, vous verrez que cela ne fonctionne plus. Lors du rappel, nous obtenons l'élément qui est en train d'être déplacé (ui.helper), à partir duquel vous pouvez extraire les attributs ou les données que vous voulez.

(function(){ 

    $('.dragme').draggable({ 
     revert: true, 
     drag: function (e, ui) { 
      var elem = $(ui.helper), 
       id = elem.attr('id'), 
       data = elem.data('example'); 

      $('h1').text(data + ' being dragged! #' + id); 
     }, 
     revert: function (e, ui) {    
      $('h1').text('---'); 
      return !e; 
     } 
    }); 

})(); 

Working Example

Regardez resourses externes dans ce violon. Vous verrez jQueryUI et Touchpunch