當拖動元素時打破swipeleft/-right

Question

我遇到了滑動事件並拖動元素時出現問題。

在我的應用程序中，我使用swipeleft/-right在頁面之間導航（它有效）。 在一個頁面中有很多拖動元素（拖動作品）。

所以問題是，當一個元素向右水平拖動時，swipeleft在dragstop之後工作。 swingight的作用就像向左拖動一樣。

這讓我很困惑。

那麼，當我拖動一個元素時，是否可以停止或打破swipeleft/-right？

這是刷卡的代碼（由THX＃1）

$('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); 
    } 
}); 

這是拖累

$ (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

好了，現在我得到了解決：

o.v.的答案是正確的，並與ahren的提示，我已經解決了它。

爲了解釋這裏是代碼：

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

可拖動代碼：

$ (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) 

     }); 

    } 
}); 

所以，非常感謝你的幫助o.v.和ahren

Answer 2

的jQuery event.preventDefault()應該處理正是代碼。在當前的代碼中，完成拖動事件處理程序後，手勢將「繼續」由移動瀏覽器進行分析 - 如果用戶拖放操作類似於左滑動，則會觸發相關處理程序：

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

變更後，jQuery將指示該事件與做，不應該是「遞迴」到瀏覽器觸發一個默認響應（在你的情況，解決輕掃手勢）的瀏覽器。

更新：

正如在評論中提到的，我錯誤地建議preventDefault()作爲刷卡處理程序的一部分。這應該是dragdrop事件處理程序的一部分。檢出this answer建議this JS集成 - 這應該解決您的問題在全球範圍內。