요소를 끌 때 swipeleft/-right를 깨기

Question

스 와이프 이벤트 및 요소를 드래그하는 데 문제가 있습니다.

내 응용 프로그램에서는 swipeleft/-right를 사용하여 페이지 간을 이동합니다 (작동합니다). 한 페이지에는 많은 드래그 요소 (드래그 작업)가 있습니다.

그래서 요소가 가로로 오른쪽으로 끌면 문제가됩니다. 스 와이프 레프트는 드래그 스톱 후에 작동합니다. 왼쪽으로 드래그하는 것, swiperight가 작동하는 것과 같습니다.

나를 혼란스럽게합니다.

요소를 드래그 할 때 스 와이프 레프트를 멈추거나 끊을 수 있습니까?

이

는 (유래 들으에서) 슬쩍에 대한 코드

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

좋아, 지금은 해결책을 얻었다.

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. 주셔서 대단히 감사합니다 여기에 설명 할

코드입니다 그리고 애런

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으로 통합하여 글로벌 수준에서 문제를 해결해야합니다.

o.v.의 대답은 정확하고 나는 그것을 해결 한 애런의 끝이었다