jquery - 拖动元素时中断 swipeleft/-right

Question

我在滑动事件和拖动元素时遇到问题。

在我的应用程序中，我使用向左/向右滑动在页面之间导航(它有效)。一个页面中有很多拖动元素(拖 Action 品)。

所以问题是，当一个元素水平向右拖动时，向左滑动会在dragstop之后起作用。与向左拖动相同，向右滑动即可。

这让我很困惑。

那么当我拖动元素时是否可以停止或中断向左/向右滑动？

这是滑动代码(来自 Stackoverflow，谢谢)

$('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() 作为滑动处理程序的一部分。这应该是拖放事件处理程序的一部分。查看this answer推荐this JS进行整合 - 这应该在全局范围内解决您的问题。