Drag State Testing

[yourpalsonja]

Hey–

I want to add a click event to elements inside my overscroll container, but can't seem to detect whether a drag is happening or not. Maybe I'm implementing the code incorrectly–I can't even get it to log out when a drag event is happening:

if($(".slider").data("overscroll").dragging){
console.log('slider is getting dragged')
}

Any help you could offer up?

[giovannipds]

@yourpalsonja Have you reached any solution? I'm also looking for a solution to this kind of situation... =/ I'm working on it, if I accomplish something I tell you.

[giovannipds]

@yourpalsonja Hello! I was doing some attempts here, but I gave up using the plugin. I'll try another one, the dragend JS.

Where I was, I was going to something like this:

CSS:

.important-grabbing {
    cursor: -webkit-grabbing !important; // just to show the hand while dragging
}

JS:

var should_bubble = true,
    content = $('#content');

content.overscroll({
    ...
    dragHold: true,
    ...
}).on('overscroll:dragstart', function() {
    console.log('dragstart');
    content.add(content.find('a')).addClass('important-grabbing');
    setTimeout(function() {
        should_bubble = false;
    }, 150);
}).on('overscroll:dragend', function() {
    console.log('dragend');
    content.add(content.find('a')).removeClass('important-grabbing');
    setTimeout(function() {
        should_bubble = true;
    }, 150);
}).on('overscroll:driftstart', function() {
    console.log('driftstart');
    should_bubble = false;
}).on('overscroll:driftend', function() {
    console.log('driftend');
    should_bubble = true;
}).on('click', function(event) {
    event.preventDefault();
    event.stopPropagation(); // <-- this kind of thing would do the trick
    if ( ! should_bubble) {
        console.log('click wouldn\'t work - should_bubble = ' + should_bubble);
    } else {
        console.log('click would work - should_bubble = ' + should_bubble);
    }
    // console.log(content.data('overscroll').dragging);
});

What I was doing here, was just trying to see when the click event should propagate or not. But, I have noticed that the dragstart (and dragend) event is firing incorrectly, it shouldn't have been firing when the user just tap or click, as I have commented on the issue #111. So... I abandoned this idea and now I'm going to try to use the dragend with hammer.js. The idea is between the concepts of mousedown and mousemove, when the users really drags (mousedown + mousemove), it should block the click propagation.

Hope you get to something too. If I may be able to help in some concept, let me know. See ya.

[bramcordie]

Checking the dragging property in a mouseup event did the trick for me.

var overscrollable = $("#overscrollable").overscroll();

overscrollable.on("mouseup", ".clickable", function () {
    var dragging = overscrollable.data("overscroll").dragging;

    if(dragging) {
        console.log("ignore click behaviour");
    } else {
        console.log("do click behaviour");
    }
});