Javascript glisser pour les appareils tactiles

Vous pouvez utiliser l'interface utilisateur Jquery pour faire glisser-déposer avec une bibliothèque supplémentaire qui traduit les événements de souris en contact, ce qui vous convient, la bibliothèque que je recommande est https://github.com/furf/jquery-ui-touch-punch , avec Ceci, votre glisser-déposer de Jquery UI, devrait fonctionner sur des outils tactiles

Ou vous pouvez utiliser ce code que j'utilise, il convertit également les événements de la souris et ça fonctionne comme une magie.

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); } 

Et dans votre document, appelez simplement la fonction init ()

Code trouvé à partir d' ici

Pour ceux qui cherchent à utiliser cela et à conserver la fonctionnalité «cliquer» (comme John Landheer le mentionne dans son commentaire), vous pouvez le faire avec quelques modifications seulement:

Ajoutez quelques globals:

 var clickms = 100; var lastTouchDown = -1; 

Ensuite, modifiez l'instruction switch de l'original à ceci:

 var d = new Date(); switch(event.type) { case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break; case "touchmove": type="mousemove"; lastTouchDown = -1; break; case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break; default: return; } 

Vous voudrez peut-être ajuster les «clics» à vos goûts. Fondamentalement, il suffit de regarder un «touchstart» suivi rapidement d'un «touchend» pour simuler un clic.

Merci pour les codes ci-dessus! – J'ai essayé plusieurs options et c'était le ticket. J'ai eu des problèmes dans la mesure où preventDefault empêchait de faire défiler sur l'ipad – Je teste maintenant les articles de draggable et ça fonctionne très bien jusqu'à présent.

 if (event.target.id == 'draggable_item' ) { event.preventDefault(); } 

J'ai eu la même solution que la réponse de gregpress , mais mes articles de draggable ont utilisé une classe au lieu d'un identifiant. Cela semble fonctionner.

 var $target = $(event.target); if( $target.hasClass('draggable') ) { event.preventDefault(); } 

Ancien fil que je connais …….

Le problème avec la réponse de @ryuutatsuo est qu'il bloque également toute entrée ou autre élément qui doit réagir sur les «clics» (par exemple, les entrées), donc j'ai écrit cette solution. Cette solution a permis d'utiliser n'importe quelle bibliothèque de glisser-déposer existante basée sur les événements de mousedown, mousemove et mouseup sur n'importe quel appareil tactile (ou cumputer). Il s'agit également d'une solution multi-navigateurs.

J'ai testé sur plusieurs périphériques et ça marche rapidement (en combinaison avec la fonctionnalité de glisser-déposer de ThreeDubMedia (voir aussi http://threedubmedia.com/code/event/drag )). C'est une solution jQuery afin que vous puissiez l'utiliser uniquement avec jQuery libs. J'ai utilisé jQuery 1.5.1 pour cela parce que certaines fonctions plus récentes ne fonctionnent pas correctement avec IE9 et plus (pas testé avec les versions plus récentes de jQuery).

Avant d'ajouter une opération de glisser-déposer à un événement, vous devez d'abord appeler cette fonction :

 simulateTouchEvents(<object>); 

Vous pouvez également bloquer tous les composants / enfants pour entrer ou accélérer la gestion des événements en utilisant la syntaxe suivante:

 simulateTouchEvents(<object>, true); // ignore events on childs 

Voici le code que j'ai écrit. J'ai utilisé de belles astuces pour accélérer l'évaluation des choses (voir code).

 function simulateTouchEvents(oo,bIgnoreChilds) { if( !$(oo)[0] ) { return false; } if( !window.__touchTypes ) { window.__touchTypes = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'}; window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1}; } $(oo).bind('touchstart touchmove touchend', function(ev) { var bSame = (ev.target == this); if( bIgnoreChilds && !bSame ) { return; } var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type e = ev.originalEvent; if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type] ) { return; } //allow multi-touch gestures to work var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false, b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false; if( b || window.__touchInputs[ev.target.tagName] ) { return; } //allow default clicks to work (and on inputs) // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent"); newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); touch.target.dispatchEvent(newEvent); e.preventDefault(); ev.stopImmediatePropagation(); ev.stopPropagation(); ev.preventDefault(); }); return true; }; 

Ce qu'il fait: d'abord, il traduit des événements uniques sur des événements de souris. Il vérifie si un événement est provoqué par un élément sur / dans l'élément qui doit être traîné. S'il s'agit d'un élément de saisie comme entrée, de la zone de texte, etc., il ignore la traduction, ou si un événement de souris standard est attaché à celui-ci, il sautera une traduction.

Résultat: chaque élément sur un élément de dragage est toujours en cours.

Happy coding, greetz, Erwin Haantjes