How to prevent swipe event from firing when dragging - jquery-ui

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