Brechen swipeleft/-right beim Ziehen eines Elements

Question

Ich habe ein Problem mit dem Swipe-Ereignis und ein Element ziehen.

In meiner Anwendung verwende ich swipeleft/-right, um zwischen den Seiten zu navigieren (es funktioniert). In einer Seite gibt es viele Elemente ziehen (ziehen funktioniert).

Das Problem ist also, wenn ein Element horizontal nach rechts zieht, funktioniert der Swipeleft nach Dragstop. Es ist das gleiche mit dem Ziehen nach links, Swiperight funktioniert.

Es macht mich verwirrt.

Also ist es möglich, die swipeleft/-right zu stoppen oder zu brechen, wenn ich ein Element ziehe?

Dies ist der Code für Swipe (von 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); 
    } 
}); 

Und das ist der Code für 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, jetzt habe ich die Lösung:

O. V. Antwort war richtig und mit Ahren Tipp ich es gelöst habe.

hier zu erklären, ist der Code:

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

Der ziehbar-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) 

     }); 

    } 
}); 

Also, vielen Dank für Ihre Hilfe O. V. und ahren

Answer 2

jQuery event.preventDefault() sollte genau das behandeln. In Ihrem aktuellen Code würde die Geste nach Beendigung des Drag-Ereignis-Handlers "weiter" vom mobilen Browser geparst werden - und wenn eine Benutzer-Drag-and-Drop-Aktion einem Linkswischen ähnelt, würde dies den relevanten Handler auslösen:

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

nach der Änderung wird jQuery den Browser anweisen, dass das Ereignis mit geschieht und soll nicht zur Auslösung einer Standardantwort an den Browser „handed zurück“ (in Ihrem Fall eine Streichgeste Lösung).

Update:

Wie in den Kommentaren erwähnt, habe ich preventDefault() als Teil des Swipe-Handler fälschlicherweise vorgeschlagen. Dies sollte ein Teil von DragDrop Event-Handler sein. Schauen Sie sich this answer an und empfehlen Sie, this JS zu integrieren - das sollte Ihr Problem auf globaler Ebene ansprechen.