[Draggable double onClick in iOS]

Updated the codepen:

 

The onPress event is also doubled.

[Draggable double onClick in iOS]

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

 

Thank you.

[draggable - 'click' triggered on drag]

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

[Draggable double onClick in iOS]

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

See the Pen KdVPmj by cyboide (@cyboide) on CodePen

[draggable - 'click' triggered on drag]

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

[draggable - 'click' triggered on drag]

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.

[draggable - 'click' triggered on drag]

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 

[draggable - 'click' triggered on drag]

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

[draggable - 'click' triggered on drag]

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

[draggable - 'click' triggered on drag]

Anyone has that problem?

[draggable - 'click' triggered on drag]

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.

[Doc : camelCase for Draggable.addEventListener()]

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.

[draggable set x y]

Yes, the update method seems very useful, wish I knew it before!

Thanks Rodrigo.

 

I never stop learning how to use the GSAP...

[Draggable and mouseover mouseout]

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

 

Thanks for your quick reply.

[Draggable and mouseover mouseout]

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?

[Calculate object’s speed according to distance]

Great, thanks a lot!

[draggable - 'click' triggered on drag]

Well, that seems to work too.

[Calculate object’s speed according to distance]

Yes exactly.

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

[draggable - 'click' triggered on drag]

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

[Calculate object’s speed according to distance]

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.

[draggable - 'click' triggered on drag]

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

[Calculate object’s speed according to distance]

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.

[draggable - 'click' triggered on drag]

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?

[Draggable disable enable]

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

[Draggable right click]

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.