Cyboide

Updated the codepen: The onPress event is also doubled.

Looks like, but not exactly. Not related to my IE problem I refer to there. Thank you.

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

Hi, There is a double event with Draggable’s onClick event in iOS 8.4.1 (iPhone or iPad). In Safari, it seems to also trigger the iOS keyboard... On Chrome the double event bug is present, but the iOS keyboard is not popping up. I specified the OS version, because I don’t think it did that before I updated my iOS the other day, and now it does what I described above with either GSAP 1.18 or 1.17. EDIT: It turns out the bug is also present in iOS 6.1.6 (the latest of 6.x), and this one was not updated for a very, very long time... The only difference is the keyboard is not popping in Safari (iPhone 3GS ... ... ! )

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

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.

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

Oops, sorry. I just made one, but I can’t reproduce the bug. http://codepen.io/cyboide/pen/RWWwEW 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...

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

Anyone has that problem?

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.

Hi, In the HTML5 doc, Draggable>Methods>addEventListener, it mentions the event strings as camel case, but it is not working for me. I have to use all small caps. I’m supposed to have the latest 1.17.0. Thanks.

Yes, the update method seems very useful, wish I knew it before! Thanks Rodrigo. I never stop learning how to use the GSAP...

True enough it works fine in your example. Must be something specific in what I’m working on. Thanks for your quick reply.

Hi, I’m having weird behavior with mouseover and mouseout events being triggered only sporadically on elements inside a Draggable. I actually want them to fire, but It seems they don’t at all until I used the draggable a first time, and then it works, but then with more subsequent dragging sometimes it works, sometimes not. Any idea?

Great, thanks a lot!

Well, that seems to work too.

Yes exactly. (Sorry, explaining that in the first place would have made my question easier to undersand...)

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

Hi Jonathan, Thanks. However this is not what I’m looking for. I don’t know the default values, that’s the thing. In a TweenLite object, etc., a total time value is declared, but not the speed itself. So, to use another example, if I would want a graphic to move forever in the x direction (just an example), all I could give is the speed I want that graphic to move, not the default time or time-scale. I tried the velocity-distance formulas, but it gives me weird numbers.

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

Hi there, I have a math yet animation-related question here... Lets say a graphic is to be tweened from one end of the screen to the other at a specific speed, no matter how long or short the distance is. So when declaring the tween, how to calculate the time value? TweenLite.fromTo(element, ??, {left:positionX}, {left:0}); My problem is, if I set a fixed time value, the object will move at a different speed. If the distance is wider, the object will probably move faster, probably too fast. If the distance is short, the object will move slower, probably too slow.

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: http://codepen.io/GreenSock/pen/2a69b04d43e6b492951e512b2e07968b 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?

In the above example it should be: // disable draggable instance myDraggable[0].disable(); // enable draggable instance myDraggable[0].enable(); Because Draggable.create() returns an Array, not the Draggable itself. Right? But I wish it would...

Hi Justin, Maybe by "controlling" the right-click event. So you could temporarily disable the Draggable. Although to date I didn’t personally do much in regards of right-clicks in HTML5, I think "oncontextmenu" is the event to listen to.