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

Ok, now I got the solution:

o.v.’s answer was correct and with ahren’s tip I’ve solved it.

To explain here is the code:

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);
}
});

The draggable-code:

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

        });

  } 
});

So, thank you very much for your help o.v. and ahren