Vieux fil je sais .......
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 aux «clics» (par exemple les entrées), j'ai donc écrit cette solution. Cette solution a rendu possible l'utilisation de n'importe quelle bibliothèque de glisser-déposer existante basée sur des événements mousedown, mousemove et mouseup sur n'importe quel appareil tactile (ou cumputer). C'est également une solution multi-navigateurs.
J'ai testé sur plusieurs appareils et cela fonctionne rapidement (en combinaison avec la fonction glisser-déposer de ThreeDubMedia (voir aussi http://threedubmedia.com/code/event/drag )). C'est une solution jQuery donc vous ne pouvez l'utiliser qu'avec les bibliothèques jQuery. J'ai utilisé jQuery 1.5.1 pour cela car certaines fonctions plus récentes ne fonctionnent pas correctement avec IE9 et les versions ultérieures (non testées avec les nouvelles versions 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 l'entrée ou pour 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: Dans un premier temps, il convertit les événements d'une seule touche en événements de souris. Il vérifie si un événement est causé par un élément sur / dans l'élément qui doit être déplacé. S'il s'agit d'un élément d'entrée comme input, textarea, etc., il ignore la traduction, ou si un événement de souris standard lui est attaché, il sautera également une traduction.
Résultat: chaque élément d'un élément déplaçable fonctionne toujours.
Bon codage, greetz, Erwin Haantjes