Trascina e rilascia HTML sui dispositivi mobili

Quando aggiungi il trascinamento della selezione a una pagina Web utilizzando JavaScript, ad esempio jQuery UI trascinabile e trascinabile, come puoi farlo funzionare quando viene visualizzato tramite un browser su un dispositivo mobile - dove le azioni del touchscreen per il trascinamento vengono intercettate dal telefono per scorrere la pagina, ecc?

Tutte le soluzioni sono benvenute ... i miei pensieri iniziali sono:

1. Avere un pulsante per i dispositivi mobili che "solleva" l'elemento da trascinare e quindi fare clic sulla zona in cui desiderano rilasciare l'elemento.

2. Scrivi un'app che lo faccia per i dispositivi mobili piuttosto che provare a far funzionare la pagina web su di essi!

3. I vostri suggerimenti e commenti per favore.

jQuery UI Touch Punch risolve tutto.

È un supporto per eventi touch per l'interfaccia utente jQuery. Fondamentalmente, collega semplicemente l'evento touch all'interfaccia utente di jQuery. Testato su iPad, iPhone, Android e altri dispositivi mobili abilitati al tocco. Ho usato jQuery UI ordinabile e funziona come un fascino.

http://touchpunch.furf.com/

C'è un nuovo polyfill per tradurre gli eventi di tocco in drag-and-drop, in modo tale che HTML5 Drag and Drop sia utilizzabile su dispositivi mobili.

Il polyfill è stato introdotto da Bernardo Castilho in questo post .

Ecco una demo di quel post.

Il post presenta anche diverse considerazioni sul design folyfill.

La versione beta di Sencha Touch supporta il trascinamento della selezione.

Puoi fare riferimento al loro esempio DnD . A proposito, funziona solo sui browser webkit.

Il retrofitting di questa logica in una pagina web sarà probabilmente difficile. A quanto ho capito, disabilitano tutti i panning del browser e implementano gli eventi di panning interamente in javascript, consentendo una corretta interpretazione del drag and drop.

Aggiornamento: il link dell'esempio originale è morto, ma ho trovato questa alternativa:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Avevo bisogno di creare un drag and drop + rotazione che funzionasse su desktop, dispositivi mobili, tablet incluso Windows Phone. L'ultimo lo ha reso più complicato (mspointer vs. eventi touch).

La soluzione è arrivata dalla grande libreria Greensock

Ci sono voluti alcuni salti mortali per rendere lo stesso oggetto trascinabile e ruotabile, ma funziona perfettamente

Potresti anche provare il polyfill drag-n-drop di Tim Ruffle , sicuramente simile a quello di Bernardo Castilho (vedi risposta @remdevtec).

Fallo semplicemente npm install mobile-drag-drop --save (altri metodi di installazione disponibili, ad es. Con pergola)

Quindi, qualsiasi interfaccia di elemento che si basa sul rilevamento del tocco dovrebbe funzionare su dispositivi mobili (ad esempio trascinando solo un elemento, invece di scorrere + trascinare contemporaneamente).

Jquery Touch Punch è fantastico, ma ciò che fa è disabilitare tutti i controlli sul div trascinabile, quindi per evitare ciò devi modificare le linee ... (al momento della scrittura - riga 75)

modificare

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

leggere

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

aggiungi tutti gli or che vuoi per ciascuno degli elementi che vuoi 'sbloccare'

Spero che aiuti qualcuno

ecco la mia soluzione:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

La libreria Sortable JS è compatibile con i touch screen e non richiede jQuery.

Il modo in cui gestisce i touchscreen richiede di toccare lo schermo per circa 1 secondo per iniziare a trascinare un elemento.

Inoltre, presentano un test video che mostra che questa libreria funziona più velocemente di JQuery UI Sortable.