Question

我遇到了滑动事件和拖动元素的问题。

在我的应用程序中，我使用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);
    }
});

这是拖动代码

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

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 - 这应该可以在全球范围内解决您的问题。

Answer 2

好的，现在我得到了解决方案：

o.v.的回答是正确的，并且我已经解决了问题。

这里要解释的是代码：

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.和阿伦

拖动元素时打破swipeleft / -right

2 个答案: