Trascinare la selezione sui dispositivi mobili utilizzando un codice che traduce l'evento (codice incluso), ma gli eventi normali non funzionano

Question

Sto utilizzando il codice seguente per consentire il trascinamento della selezione sul mio sito Web. Tuttavia, mentre le parti del mio codice che hanno funzionalità di trascinamento della selezione, su un iPhone, non riesco a scorrere o spostare la pagina in alcun modo. Posso trascinare lo spostamento &, ma la normale funzionalità touch di iPhone non funziona più!

Ho trovato il frammento di seguito in diverse risposte StackOverflow quindi mi chiedo se c'è una soluzione per questo. Voglio essere in grado di trascinare & di rilascio su entrambi i siti Web & mobile.

Grazie!

mio codice trascinamento (solo un elenco):

$(function() { 
    $(".drag_me ul").sortable(); 
}); 

codice per gli eventi di tocco:

function touchHandler(event) 
{ 
var touches = event.changedTouches, 
    first = touches[0], 
    type = ""; 

    switch(event.type) 
{ 
    case "touchstart": type = "mousedown"; break; 
    case "touchmove": type="mousemove"; break;   
    case "touchend": type="mouseup"; break; 
    default: return; 
} 
var simulatedEvent = document.createEvent("MouseEvent"); 
simulatedEvent.initMouseEvent(type, true, true, window, 1, 
          first.screenX, first.screenY, 
          first.clientX, first.clientY, false, 
          false, false, false, 0/*left*/, null); 

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

Answer 1

ho lavorato sullo stesso problema e che ho appena leccato. Ho rimosso il coraggio di touchHandler e li uso per popolare il callback che lega gli ascoltatori di eventi solo ai figli di <div id='stage'>. Di seguito è riportato il mio codice utilizzando jquery. Spero che questo ti aiuti!

function init(){ 


$("#stage").children().bind('touchstart touchmove touchend touchcancel', function(){ 
    var touches = event.changedTouches, first = touches[0], type = ""; 
    switch(event.type){  
     case "touchstart": type = "mousedown"; 
    break;  
     case "touchmove": type="mousemove"; 
    break;    
     case "touchend": type="mouseup"; 
    break;  
     default: return; 
    } 

    var simulatedEvent = document.createEvent("MouseEvent"); 
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
         first.screenX, first.screenY, 
         first.clientX, first.clientY, false, 
         false, false, false, 0/*left*/, null); 
    first.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
    }); 
} 

Answer 2

ti impedisce la funzionalità di scorrimento di default con questa riga di codice:

event.preventDefault(); 

Poiché questo oggetto evento è legato al documento, tutti gli scroll nativi sono disabilitati.

Se si desidera consentire lo scorrimento della pagina in modo nativo, aggiungere i listener di eventi a un discendente dell'elemento del documento (in questo modo se l'utente scorre in una regione diversa dal contenitore ordinabile, sarà in grado di scorrere normalmente la pagina) .

Cambio:

function init() 
{ 
    document.addEventListener("touchstart", touchHandler, true); 
    document.addEventListener("touchmove", touchHandler, true); 
    document.addEventListener("touchend", touchHandler, true); 
    document.addEventListener("touchcancel", touchHandler, true);  
} 

A:

function init() 
{ 
    $('#sortable_container').bind('touchstart touchmove touchend touchcancel', touchHandler); 
}