Breaking swipeleft/-right khi kéo một phần tử

Question

Tôi gặp vấn đề với sự kiện vuốt và kéo một phần tử.

Trong ứng dụng của tôi, tôi sử dụng swipeleft/-right để điều hướng giữa các trang (nó hoạt động). Trong một trang có rất nhiều yếu tố kéo (hoạt động kéo).

Vì vậy, vấn đề là, khi một phần tử đang kéo theo chiều ngang sang bên phải, công cụ quét ngang hoạt động sau khi kéo. Nó tương tự với việc kéo sang trái, các công trình Swiperight.

Nó làm tôi bối rối.

Vì vậy, bạn có thể dừng hoặc phá vỡ swipeleft/-right khi tôi kéo một phần tử không?

Đây là mã cho swipe (từ 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); 
    } 
}); 

Và đây là mã cho kéo

$ (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, bây giờ tôi có những giải pháp: Câu trả lời

o.v. là chính xác và với mũi ahren của tôi đã giải quyết nó.

Để giải thích đây là mã:

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

Các kéo-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) 

     }); 

    } 
}); 

Vì vậy, cảm ơn bạn rất nhiều vì sự giúp đỡ của bạn o.v. và ahren

Answer 2

jQuery event.preventDefault() nên xử lý chính xác điều đó. Trong mã hiện tại của bạn, sau khi hoàn thành trình xử lý sự kiện kéo, cử chỉ sẽ "tiếp tục" được trình duyệt di động phân tích cú pháp - và nếu hành động kéo và thả của người dùng tương tự như vuốt sang trái, nó sẽ kích hoạt trình xử lý có liên quan:

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

Sau khi thay đổi, jQuery sẽ hướng dẫn trình duyệt mà sự kiện này được thực hiện với và không nên "tay lại" cho trình duyệt để kích hoạt một phản ứng mặc định (trong trường hợp của bạn, giải quyết một cử chỉ swipe).

Cập nhật:

Như đã đề cập trong các ý kiến, tôi đã nhầm đề nghị preventDefault() như một phần của điều khiển swipe. Đây phải là một phần của trình xử lý sự kiện dragdrop. Hãy xem this answer đề xuất this JS để được tích hợp - điều đó sẽ giải quyết vấn đề của bạn ở cấp độ toàn cầu.