How to prevent swipe event from firing when dragging

Question

I'm using jQueryMobile's swipe event with JQuery UI's draggable.

JSFiddle explains it best.

$('.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 :('); 
});

Basically, when you try to drag the dark blue box to the right, the swipe event gets triggered.

I want to prevent this when dragging. What would you recommend?

(JSFiddle solution would be awesome!)

Answer 1

You Can use flags on or off

Demo

http://jsfiddle.net/pzwwphL3/

Code

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 :(');
    }
});