JavaScript glisser / déplacer pour dispositifs de contact

Question

Je suis à la recherche d'un drag & DROP plugin qui fonctionne sur les appareils tactiles.

Je voudrais une fonctionnalité similaire à celle de jQuery UI plugin qui permet de "droppable" éléments.

Le jqtouch plugin prend en charge les faisant glisser, mais pas non plus d'abandon.

Ici est le drag & drop qui ne prend en charge iPhone/iPad.

Quelqu'un peut-il m'indiquer la direction d'un drag & drop plugin qui fonctionne sur android/ios?

...Ou il pourrait être possible de mettre à jour le jqtouch plugin pour droppability, il s'exécute déjà sur Andriod et IOS.

Merci!

Answer 1

Vous pouvez utiliser l'INTERFACE utilisateur de Jquery pour faire glisser et déposer avec une bibliothèque supplémentaire qui se traduit par les événements de la souris dans le toucher, qui est ce que vous avez besoin, la bibliothèque que je recommande est https://github.com/furf/jquery-ui-touch-punchavec cela, votre glisser-déposer à partir de Jquery UI doit travailler sur touch conçoit

ou vous pouvez utiliser ce code que j'utilise, il convertit également les événements de la souris en touche et il 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.prêt il suffit d'appeler la fonction init()

code trouvé à partir d' Ici

Answer 2

Pour ceux qui cherchent à utiliser et conserver la fonctionnalité de « clic » (comme John Landheer mentionne dans son commentaire), vous pouvez le faire avec juste un couple des modifications :

Ajouter un couple de globals :

Puis modifiez l’instruction de commutation de l’original à cela :

Vous pouvez ajuster « clickms » à votre goût. Fondamentalement il est train de regarder pour un « touchstart » rapidement suivie d’une « touchstart » pour simuler un clic.

Answer 3

Merci pour les codes ci-dessus ! -J’ai essayé plusieurs options et c’était le billet. J’ai eu des problèmes dans ce preventDefault empêchait le défilement sur l’ipad - je teste maintenant pour les éléments déplaçables et il fonctionne très bien jusqu'à présent.

Answer 4

J’ai eu le même problème que gregpress, mais mes articles draggable utilisé une classe au lieu d’un id. Il semble fonctionner.

Answer 5

Vieux thread, je sais.......

Problème avec la réponse de @ryuutatsuo est qu'il bloque également toute saisie ou autre élément qui a réagir sur les "clics" (par exemple entrées), j'ai donc écrit cette solution. Cette solution a permis d'utiliser n'importe quel glisser-déposer de la bibliothèque qui est basée sur le mousedown, mousemove et mouseup événements sur n'importe quelle touche de l'appareil (ou cumputer). C'est aussi une solution de navigateur.

Je l'ai testé sur plusieurs appareils et il est rapide (en combinaison avec la fonction glisser-déposer de ThreeDubMedia (voir aussi http://threedubmedia.com/code/event/drag)). C'est un jQuery solution de sorte que vous pouvez l'utiliser uniquement avec jQuery libs. J'ai utilisé jQuery 1.5.1 pour elle parce que certains plus récents, les fonctions ne fonctionnent pas correctement avec IE9 et au-dessus (pas testé avec les nouvelles versions de jQuery).

Avant d'ajouter tout de glisser ou de tomber opération pour un événement que vous devez appeler cette fonction première:

simulateTouchEvents(<object>);

Vous pouvez également bloquer tous les composants/les enfants pour l'entrée ou pour accélérer la gestion des événements à l'aide de la syntaxe suivante:

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

Voici le code que j'ai écrit. J'ai utilisé quelques astuces intéressantes pour accélérer l'évaluation de choses (voir le 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: Au premier abord, elle se traduit par touche unique d'événements en événements de souris. Il vérifie si un événement est causé par un élément dans l'élément qui doit être déplacé. Si il est un élément de saisie comme input, textarea, etc, il ignore la traduction, ou si un modèle de souris de l'événement est attaché à lui, il va également passer une traduction.

Résultat: Chaque élément sur un élément déplaçable est encore à travailler.

Heureux de codage, greetz, Erwin Haantjes