如何防止拖动时触发滑动事件

时间:2015-08-04 23:21:04

标签: jquery-ui jquery-mobile drag-and-drop swipe

我正在使用jQueryMobile的滑动事件和JQuery UI的可拖动。

JSFiddle解释得最好。

$('.draggable').draggable({
    delay: 300,
    cancel: false,
    start: function(event, ui) {
//      something needs to happen here?
    },
    stop: function(event, ui) {
    },
    revert: function(is_valid_drop) {
      return true;
    }
});

$('.swipe-area').on('swiperight', function(evt) {
    alert('swiped right :('); 
});

基本上,当您尝试将深蓝色框拖到右侧时,会触发滑动事件。

我想在拖动时阻止这种情况。你会推荐什么?

(JSFiddle解决方案真棒!)

1 个答案:

答案 0 :(得分:1)

您可以使用标记onoff

<强>演示

http://jsfiddle.net/pzwwphL3/

<强>代码

var drag; 
$('.droppable').droppable({
    accept: '.draggable',
    drop: function(event, ui) {


    }
  });

$('.draggable').draggable({
    delay: 300,
    cancel: false,
    start: function(event, ui) {
        drag = "on" 
//      event.preventDefault();
//      event.stopPropagation();
    },
    stop: function(event, ui) {
        drag = "off" 
    },
    revert: function(is_valid_drop) {
      return true;
    }
});

$('.swipe-area').on('swiperight', function(evt) {
    if (drag == "off") {
    alert('swiped right :(');
    }
});