Trascinamento della selezione JavaScript per dispositivi touch [chiuso]

Sto cercando un plug-in drag & DROP che funzioni su dispositivi touch.

Vorrei funzionalità simili al plugin jQuery UI che consente elementi "droppabili".

Il plugin jqtouch supporta il trascinamento, ma non il rilascio.

Ecco il drag & drop che supporta solo iPhone / iPad.

Qualcuno può indicarmi la direzione di un plug-in drag & drop che funziona su Android / ios?

... Oppure potrebbe essere possibile aggiornare il plugin jqtouch per la droppabilità, funziona già su Andriod e IOS.

Grazie!

Puoi utilizzare l'interfaccia utente di Jquery per il trascinamento della selezione con una libreria aggiuntiva che traduce gli eventi del mouse in tocco, che è ciò di cui hai bisogno, la libreria che consiglio è https://github.com/furf/jquery-ui-touch-punch , con questo il tuo drag and drop dall'interfaccia utente di Jquery dovrebbe funzionare su dispositivi touch

oppure puoi usare questo codice che sto usando, converte anche gli eventi del mouse in tocco e funziona come per magia.

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

E nel tuo document.ready chiama semplicemente la funzione init ()

codice trovato da qui

Per chiunque desideri utilizzarlo e mantenere la funzionalità 'clic' (come menziona John Landheer nel suo commento), puoi farlo con solo un paio di modifiche:

Aggiungi un paio di globali:

var clickms = 100;
var lastTouchDown = -1;

Quindi modifica l'istruzione switch dall'originale a questa:

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

Potresti voler adattare i "clic" ai tuoi gusti. Fondamentalmente sta solo cercando un "touchstart" seguito rapidamente da un "touchend" per simulare un clic.

Grazie per i codici sopra! - Ho provato diverse opzioni e questo era il biglietto. Ho avuto problemi in quanto preventDefault impediva lo scorrimento sull'ipad - Ora sto testando gli elementi trascinabili e finora funziona alla grande.

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

Avevo la stessa soluzione della risposta di gregpress , ma i miei elementi trascinabili utilizzavano una classe invece di un ID. Sembra funzionare.

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

Vecchio thread lo so .......

Il problema con la risposta di @ryuutatsuo è che blocca anche qualsiasi input o altro elemento che deve reagire ai "clic" (ad esempio gli input), quindi ho scritto questa soluzione. Questa soluzione ha reso possibile utilizzare qualsiasi libreria drag and drop esistente basata su eventi mousedown, mousemove e mouseup su qualsiasi dispositivo touch (o cumputer). Questa è anche una soluzione cross-browser.

Ho provato su diversi dispositivi e funziona velocemente (in combinazione con la funzione di trascinamento della selezione di ThreeDubMedia (vedi anche http://threedubmedia.com/code/event/drag )). È una soluzione jQuery quindi puoi usarla solo con le librerie jQuery. Ho usato jQuery 1.5.1 perché alcune funzioni più recenti non funzionano correttamente con IE9 e versioni successive (non testate con le versioni più recenti di jQuery).

Prima di aggiungere qualsiasi operazione di trascinamento della selezione a un evento, devi prima chiamare questa funzione :

simulateTouchEvents(<object>);

È inoltre possibile bloccare tutti i componenti / figli per l'input o per accelerare la gestione degli eventi utilizzando la seguente sintassi:

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

Ecco il codice che ho scritto. Ho usato dei simpatici trucchi per velocizzare la valutazione (vedi codice).

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

Che cosa fa: inizialmente traduce gli eventi di tocco singolo in eventi del mouse. Controlla se un evento è causato da un elemento su / nell'elemento che deve essere trascinato. Se è un elemento di input come input, textarea ecc., Salta la traduzione, o se ad esso è collegato un evento del mouse standard, salterà anche una traduzione.

Risultato: ogni elemento su un elemento trascinabile funziona ancora.

Buona programmazione, saluti, Erwin Haantjes