Breaking swipeleft/-right when drag an element

Question

I have got a problem with the swipe event and dragging an element.

In my application I use swipeleft/-right to navigate between the pages (it works). In one page there are a lot of dragging elements (drag works).

So the problem is, when an element is dragging horizontal to the right, the swipeleft works after dragstop. It's the same with dragging to the left, swiperight works.

It makes me confused.

So is it possible to stop or break the swipeleft/-right when I drag an element?

This is the code for swipe (from 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);
    }
});

And this is the code for drag

$ (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() should handle exactly that. In your current code, upon completion of the drag event handler, the gesture would "continue" to be parsed by the mobile browser - and if a user drag-and-drop action resembles a left-swipe, it would trigger the relevant handler:

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

After the change, jQuery will instruct the browser that the event is done with and should not be "handed back" to the browser for triggering a default response (in your case, resolving a swipe gesture).

Update:

As mentioned in the comments, I've mistakenly suggested to preventDefault() as part of the swipe handler. This should have been part of dragdrop event handler. Check out this answer recommending this JS to be integrated - that should address your issue on a global level.