Javascript Glisser-déposer pour les appareils tactiles [fermé]

Je recherche un plugin drag & DROP qui fonctionne sur les appareils tactiles.

Je voudrais une fonctionnalité similaire au plugin jQuery UI qui autorise les éléments "droppables".

Le plugin jqtouch prend en charge le glisser-déposer, mais pas le drop.

Voici le glisser-déposer qui ne prend en charge que l'iPhone / iPad.

Quelqu'un peut-il me diriger vers un plugin glisser-déposer qui fonctionne sur Android / iOS?

... Ou il pourrait être possible de mettre à jour le plugin jqtouch pour la droppabilité, il fonctionne déjà sur Andriod et IOS.

Merci!

Vous pouvez utiliser l'interface utilisateur Jquery pour le glisser-déposer avec une bibliothèque supplémentaire qui traduit les événements de la souris en tactile, ce dont vous avez besoin, la bibliothèque que je recommande est https://github.com/furf/jquery-ui-touch-punch , avec votre glisser-déposer depuis l'interface utilisateur de Jquery devrait fonctionner sur les appareils tactiles

ou vous pouvez utiliser ce code que j'utilise, il convertit également les événements de la souris en toucher et cela fonctionne comme par 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.ready appelez simplement la fonction init ()

code trouvé à partir d' ici

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

Ajoutez quelques globaux:

var clickms = 100;
var lastTouchDown = -1;

Puis 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 en ce que preventDefault empêchait le défilement sur l'ipad - je teste maintenant des éléments déplaçables et cela fonctionne très bien jusqu'à présent.

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

J'avais la même solution que gregpress answer , mais mes éléments déplaçables utilisaient une classe au lieu d'un identifiant. Cela semble fonctionner.

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

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