拖动元素时打破swipeleft/-right

nil*_*vee 7 jquery jquery-mobile

我遇到了滑动事件的问题并拖动了一个元素.

在我的应用程序中,我使用swipeleft/-right在页面之间导航(它可以工作).在一个页面中有很多拖动元素(拖动工作).

所以问题是,当一个元素向右水平拖动时,swipeleft在dragstop之后工作.向左拖动也是如此,swiperight工作.

这让我感到困惑.

因此,当拖动元素时,是否可以停止或中断swipeleft/-right?

这是滑动的代码(来自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);
    }
});
Run Code Online (Sandbox Code Playgroud)

这是拖拽的代码

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

    });
  } 
});
Run Code Online (Sandbox Code Playgroud)

nil*_*vee 1

好的,现在我得到了解决方案:

ov 的答案是正确的,根据 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);
}
});
Run Code Online (Sandbox Code Playgroud)

可拖动代码:

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

        });

  } 
});
Run Code Online (Sandbox Code Playgroud)

所以,非常感谢 ov 和 ahren 的帮助