Jump to content
GreenSock

annam

draggable - 'click' triggered on drag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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');
});
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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. 

  • Like 2
Link to comment
Share on other sites

  • 5 months later...

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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  :|

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×