draggable - 'click' triggered on drag

[annam]

Hello!

 

I see that you advertise, in your Draggable plugin page, that it can differentiate between click and drag, and trigger events accordingly..

 

However click doesn't seem to be prevented on drag. At least not the native click event.. Is the above only applicable for the Draggable custom "onClick" event? How can I prevent the native click event from triggering? I tried all jQuery methos "stoppropagation", "stopImmediatePropagation" and "preventDefault" and it doesn't seem to do anything.

 

check out this jsfiddle: http://jsfiddle.net/annam/nTdAs/1/

 

Hopefully there's something I can do?

 

Thanks!

[Rodrigo]

Hi,

 

In order to prevent the onClick event you have to stop that particular event from bubbling up, not the onDragEnd event:

Draggable.create('#box', {
    onClick: function(){
        e.stopPropagation();
        alert('draggable click');
    },
    onDragEnd: function(){
    }
})

$('#box').click(function(){
    alert('native click');
})

Although is rather odd to have two click methods attached to the same element, any particular reason for that?. That's why Draggable has it's own click event that won't trigger if the element is moved more than 3 pixels, ie, if the element is dragged.

 

If you must have jQuery's click method attached to the element you could unbind the click event onDragStart and bind it back onDragEnd, but as I said before, since the tool has it's own click event I don't see a reason for that.

 

Rodrigo.

[Cyboide]

Hi,

 

Rodrigo, I don’t understand how it should work (doesn’t for me). I also tried this.pointerEvent.stopPropagation() in the Draggable’s onClick function, but it is not preventing the underlying object’s click event.

 

Here, from another post, was a solution from Jack:

See the Pen 2a69b04d43e6b492951e512b2e07968b by GreenSock (@GreenSock) on CodePen.

 

from that post:

http://forums.greensock.com/topic/8332-triggered-buttons-after-dragging/#entry32305

 

However, at that time, I don’t think the onClick handler was implemented in the Draggable object (??), so that’s why I tried Rodrigo’s suggestion because it’s way simpler to implement.

 

Any suggestion why it doesn’t work?

[Jonathan]

Hello Cyboide,

 

If i understand correctly..

 

Are you trying to stop the native click event on the element from firing ... Or are you trying to stop the Draggable onClick event from firing?

 

Or am i misunderstanding the question.. sorry

[Cyboide]

I try to prevent the native click event from firing... (I think)

 

Because when you have a Draggable element containing clickable element(s), if you start dragging from on top of one of those clickable element, and then release the Drag when still on top of that same element, its click event will fire.

 

Jack’s previous solution does work, I just thought that Annams’question is related to the same problem...

[Jonathan]

What about return false or stopPropagation() and preventDefault() on the click handler itself

 

Example: http://jsfiddle.net/nTdAs/19/

$('#box').click(function(){
    e.stopPropagation();
    e.preventDefault();
    // return false;
    alert('native click');
});

[Cyboide]

Yes, but this handler has to know when to ignore the event or not.

[Jonathan]

What about adding a class to the dragging element onDragStart and then remove the class on the element onDragEnd. And then you just bind the event to the #box.dragging selector.

• #box.dragging selector will stop the event
• #box selector will fire event normally

Example: http://jsfiddle.net/nTdAs/22/

Draggable.create('#box', {
    onClick: function(){
        alert('draggable click');
    },
    onDragStart: function(e){
        $('#box').addClass("dragging");
    },
    onDragEnd: function(e){
        e.stopImmediatePropagation();
	e.stopPropagation();
	e.preventDefault();

        $('#box').removeClass("dragging");
    }
})

$(document).on("click", '#box.dragging', function(){
    e.stopPropagation();
    e.preventDefault();
    //return false;
    alert('native click');
});

does that help?

[Cyboide]

Well, that seems to work too.

[GreenSock]

I know this is a super-old thread, but I just wanted to chime in and mention that I believe the latest version of Draggable solves this. Click/touch handling has been improved. 

[Cyboide]

Hi,

 

I would also like to come back on this super-old thread...

 

The problem is indeed fixed with the release 1.17, Safari, Chrome, Firefox, desktop or not, Mac or PC.

Except on IE, Windows 7 (even IE 9 to 11).

 

Because of IE, I still have to add some stopPropagation in the onClick handler, otherwise there is a 'ghost click' on native click events inside the Draggable, and when dragging from on top of such a native 'buttoned' element and then releasing the Draggable onto it, a native click happens...

 

And it seems sporadic, at least for the 'ghost click' effect.

 

(I cannot test on Windows 8 or 10 for the time being.)

 

Also, this.pointerEvent.stopPropagation() doesn’t really help, either on IE 9 (mouseup) or 10, 11 (pointers).

I actually have to generate a javascript error in the Draggable onClick handler for the Draggable to stop its click to propagate.

[Cyboide]

Anyone has that problem?

[Cyboide]

Release 1.18 (Draggable 0.14.1) doesn’t seem to solve the problem...

[Jonathan]

Hello Cyboide.. do you mind setting up a codepen demo example so we can see if we experience the same thing?

 

This way we can all test this using the same code to better assist you!

 

Here is a video tut by GreenSock on how to create a codepen example demo:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks

[Cyboide]

Oops, sorry.

 

I just made one, but I can’t reproduce the bug.

See the Pen RWWwEW by cyboide (@cyboide) on CodePen.

 

So right now I don’t know if the cdn GSAP is different from mine, though I loaded the latest 1.18, or is there a bug elsewhere in my app.

 

When I try to use gsap from my server in codepen, it doesn’t work.

 

Well, will keep you posted...

[Cyboide]

The only new information I have now, regarding the ghost click, is that the first one (the 'right' one) is a Mouse Event, the actual 'click' event added with js.

And the second one, the faulty one, is a Pointer Event... I cannot seem to be able to stop it for now.

 

Until I understand more what’s going on, if it rings a bell to anyone, please let me know 

[Jonathan]

Hello Cyboide,

 

I am not seeing this, could you give us more information?

 

What OS are you seeing this on? PC windows 7 (64-bit) .. on win8, in a virtual environment using win7? or on IOS on an iphone? in IE11 in win8 tablet or tablet/laptop with touch??

 

Any help with detailed OS version, browser version, etc,,  and device will be highly appreciated?

[Cyboide]

This happens only with IE in Windows 7, a normal PC.

Still cannot reproduce it in codepen though.

 

Let me come back when I have more infos. Thanks.

[Cyboide]

Ok... Now I am pretty certain it is related with Draggable. But it seems to be in a somewhat specific context.

 

I will open a new post when I am able to reproduce it in codepen (this post starts to get confusing).

 

Hope it won’t be long...

[Jonathan]

Thank you Cyboide.. but I would post your example and findings within this post so we can keep your questions and replies in context to the above replies and code examples. Which will make it easier when referencing your concerns, and help others if they are experiencing the same issue to know the context, thanks!

[Cyboide]

I will, Jonathan. But I still cannot reproduce this bug in a simpler environment.

[erikb]

This issue I've encountered and worked around is likely addressed somewhere in the last few years.  But this thread seemed relevant.

 

This works great for click and drag:

See the Pen ORKvJm?editors=0011 by jedierikb (@jedierikb) on CodePen.

 

This does not:

See the Pen XjvBGb?editors=0011 by jedierikb (@jedierikb) on CodePen.

 

The difference is adding the event listeners for click events _after_ the Draggable.create.

[erikb]

Of course, it looks like the proper way to do this is to use the Draggable's onClick events, but I got snagged retrofitting some code and using existing event handlers.

[GreenSock]

Yep, exactly. To the browser, technically you did mousedown AND mouseup on the same element, so it perceives that as a "click". Draggable can't really change that - it's the browser. That's why it's a good idea to just tap into Draggable's onClick which doesn't fire if you drag instead. 

 

Does that answer your question? 

[manar_mk]

And how you access the elements inside the draggable? 

For example I've two buttons in a draggable container. When I drag buttons, nothing happens, but they should be draggable and clickable at the same time.
Can anyone help me with this?
http://jsfiddle.net/manar_mk/9gtej14j/1/