Rottura dello swipeleft/-right quando si trascina un elemento

Question

Ho riscontrato un problema con l'evento di scorrimento e il trascinamento di un elemento.

Nella mia applicazione io uso swipeleft/-right per navigare tra le pagine (funziona). In una pagina ci sono molti elementi di trascinamento (funziona con il drag).

Quindi il problema è che quando un elemento trascina orizzontale verso destra, lo swipeleft funziona dopo il dragstop. È lo stesso con il trascinamento a sinistra, il funzionamento di swiperight.

Mi fa confondere.

Quindi è possibile arrestare o interrompere lo swipeleft/-right quando trascino un elemento?

Questo è il codice per colpo (da StackOverflow thx)

$('div.ui-page').live("swipeleft", function() { 
    var nextpage = $(this).next('div[data-role="page"]'); 
    // swipe using id of next page if exists 
    if (nextpage.length > 0) { 
     $.mobile.changePage(nextpage, 'slide'); 
    } 
}); 
$('div.ui-page').live("swiperight", function() { 
    var prevpage = $(this).prev('div[data-role="page"]'); 
    // swipe using id of next page if exists 
    if (prevpage.length > 0) { 
     $.mobile.changePage(prevpage, 'slide', true); 
    } 
}); 

E questo è il codice per il drag

$ (function(){ 
var numbers = [ 1, 2, 3, 4, 5 ];  
    numbers.sort(function() { return Math.random() - .5 }); 
    alert(numbers); 

for (var i=1; i<6; i++) { 
    $('#'+i).attr('src','bilder/'+numbers[i-1]+'.png').draggable({ 
     cursor: 'move', 
     containment: $('#'+i).parent().parent(), 
     revert: true, 

    }); 
    } 
}); 

Answer 1

Ok, ora ho la soluzione: risposta

di o.v. era corretta e con punta di Ahren ho risolto.

Per spiegare qui è il codice:

var moveme=false; // global variable is false(by default) when no element is dragged 

$('div.ui-page').live("swipeleft", function (event){ 

if(moveme===true){event.preventDefault(); return false;} 

var nextpage = $(this).next('div[data-role="page"]'); 
// swipe using id of next page if exists 

if (nextpage.length > 0) { 
$.mobile.changePage(nextpage, 'slide',true); 
} 
}); 

$('div.ui-page').live("swiperight", function(event){ 

if(moveme===true){event.preventDefault(); return false;} 

var prevpage = $(this).prev('div[data-role="page"]'); 
// swipe using id of next page if exists 

if (prevpage.length > 0) { 
$.mobile.changePage(prevpage, 'slide', true); 
} 
}); 

Il trascinabili-code:

$ (function(){ 
var numbers = [ 1, 2, 3, 4, 5 ];  
    numbers.sort(function() { return Math.random() - .5 }); 
    alert(numbers); 

for (var i=1; i<6; i++) { 
    $('#'+i).attr('src','bilder/'+numbers[i-1]+'.png').draggable({ 
     cursor: 'move', 
     containment: $('#'+i).parent().parent(), 
     revert: true, 



     start: function(){moveme=true;}, //if an element is dragged moveme=true and 
             //event.preventDefault() is used. So it is not possible to swipe 
     stop: function(){moveme=false;}, //after dragging swipe can be used (default) 

     }); 

    } 
}); 

Quindi, vi ringrazio molto per il vostro aiuto o.v. e ahren

Answer 2

jQuery event.preventDefault() dovrebbe gestire esattamente questo. Nel codice corrente, al completamento del gestore di eventi di trascinamento, il gesto "continua" ad essere analizzato dal browser mobile e, se un'azione di trascinamento della selezione simile a uno swipe a sinistra, attiverebbe il gestore pertinente:

$('div.ui-page').live("swipeleft", function(_event) { //reference the event object 
    /*your code*/ 
    _event.preventDefault(); 
    return false; 
}); 

Dopo il cambio, jQuery istruirà il browser che l'evento è fatto con e non deve essere "di nuovo la mano" per il browser per innescare una risposta di default (nel tuo caso, la risoluzione di un gesto di scorrimento).

Aggiornamento:

Come accennato nei commenti, ho erroneamente suggerito di preventDefault() come parte del gestore colpo. Questo dovrebbe essere stato parte del gestore di eventi dragdrop. Consulta this answer per raccomandare l'integrazione di this JS, che dovrebbe risolvere il problema a livello globale.