Question

I’m using jQuery Mobile to switch between various html external pages and on a page I have an draggable element like this:

var moveMe = function(e) {
    e.preventDefault();
    var orig = e.originalEvent;
    var x = event.touches[0].pageX; 
    if(x>=275 && x<709){
        $(this).css({
            left: orig.changedTouches[0].pageX
        });
    }
};
$("#dragmetimer").bind("touchstart touchmove", moveMe);

I’m switching pages with jquery mobile like this:

$("#content1").live('swipeleft', function (event, ui) {
  $.mobile.changePage("index2.html", "slide");
  event.stopImmediatePropagation();
});

$("#content2").live('swipeleft', function (event, ui) {
    $.mobile.changePage("index3.html", "slide");
    event.stopImmediatePropagation();
});
$("#content2").live('swiperight', function (event, ui) {
    $.mobile.changePage("index.html", { transition: "reverse slide"});
    event.stopImmediatePropagation();
});

The problem is that when I get to the page that has the drag function, when I drag it, it makes the swipe too.

Is there any way to control the jQuery Mobile and make it do not read the swipe function while there’s a drag gesture?

Answer 1

I think your problem has to do with event bubbling. The touchmove event is being triggered correctly on your draggable element, but is then bubbling all the way up the DOM, causing it to trigger the page swipe events.

Try adding this to your event handler, it will stop the event from bubbling up:

e.stopPropagation();

So your function would be like this:

var moveMe = function(e) {
    e.preventDefault();
    e.stopPropagation();
    var orig = e.originalEvent;
    var x = event.touches[0].pageX; 
    if(x>=275 && x<709){
        $(this).css({
            left: orig.changedTouches[0].pageX
        });
    }
};