7

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

在我的应用程序中，我使用 swipeleft/-right 在页面之间导航（它有效）。在一页中有很多拖动元素（拖动作品）。

所以问题是，当一个元素水平向右拖动时，swipeleft 在dragstop 之后起作用。向左拖动也一样，向右滑动有效。

这让我很困惑。

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

这是刷卡的代码（来自 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,

    });
  } 
});
4

2 回答 2

3

jQueryevent.preventDefault()应该完全处理这个问题。在您当前的代码中，在拖动事件处理程序完成后，手势将“继续”由移动浏览器解析 - 如果用户拖放操作类似于向左滑动，它将触发相关处理程序：

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

更改后，jQuery 将指示浏览器该事件已完成，不应“返回”给浏览器以触发默认响应（在您的情况下，解决滑动手势）。

更新：

正如评论中提到的，我错误地建议将其preventDefault()作为滑动处理程序的一部分。这应该是拖放事件处理程序的一部分。查看这个建议集成此 JS的答案- 这应该在全球范围内解决您的问题。

于 2012-11-13T22:19:50.190 回答
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);
}
});

可拖动代码：

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

        });

  } 
});

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

于 2012-11-14T20:02:52.727 回答