Multiple svg element draggable touch issue

[alexandrosb]

I am facing this problem on touch devices only. Both an Android tablet and my laptop.

If on the onRelease handled I try to tween the element then the drag event gets cancelled. If I remove the tween then I don't have this issue.

Which element will be affected appears to be random.

Logging the release event I observe that it has type: "pointercancel" where normally it is type: "pointerup"

It might be related that I am cloning the item, since when I only had one instance or even one clone this wasn't happening.

 

I am not sure I am explaining the issue properly, but any help would be greatly appreciated.

See the Pen ZZywMX by alexandrosb (@alexandrosb) on CodePen

[GreenSock]

Hm, I'm not sure what to say - I don't see where you're cloning anything and I don't see an error in the codepen. It would make sense, though, if you'd get a pointercancel event if you're cloning an element and it goes in front of the element that you initially pressed down on. Maybe try setting pointer-events:none on the cloned element? 

[alexandrosb]

I am cloning the whole svg group (the two dots and the line connecting them) which I am not sure it plays any role.

 

My issue is that when onRelease I have a TweenLite, then for some (random) elements when I try to drag after a few pixels the drag is "canceled" and the element animates to wherever I have set it. If I remove the TweenLite then I never get this drag cancel.

[GreenSock]

Tough to say without seeing it in action (reduced test case), but I was a little confused by the fact that it seems like you're trying to drag AFTER onRelease (wouldn't onRelease discontinue dragging?). 

 

Are you perhaps dragging in such a way that some other element ends up going BETWEEN the dragging element and the pointer? 

[alexandrosb]

I am not sure where I am dragging after release.

 

In the codepen I shared above, if I try dragging one of the circles it sometimes cancels the dragging mid drag. This happens only when I have a TweenLite inside the onRelease function.

 

This is really weird to even explain.

[alexandrosb]

Adding a gif that somewhat shows what happens

[GreenSock]

A few diagnostic questions:

1. Does it still happen if you move your finger/pointer slowly? It almost looks like you're dragging really fast, causing the pointer to move OFF of the actual element (maybe that's triggering a pointercancel). 
2. Why are you calling event.stopPropagation() in the onPress? 
3. Have you tried setting allowContextMenu:false?
4. Have you tried setting zIndexBoost:false? 
5. Have you tried setting allowEventDefault:false (or true)? 
6. Do you have any idea what's triggering the pointercancel event? I don't think the tween is the issue because you're only tweening AFTER the onRelease is called (and a pointercancel will trigger the onRelease). So it sounds to me like your focus should be what's forcing the pointercancel to fire. 

[alexandrosb]

1. I was in a rush to make the gif to better explain the issue, but it happens even if I move my finger really slow

2. I saw it as a suggestion somewhere and I just threw it in

3. no

4. no

5. no

6. I am lost to what's causing it. I know the tween inside the onRelease is not at fault, but how do you explain that when I remove it the problem goes away?

 

I will try 3,4,5 and I will see if anything comes out of it.

 

Thank you

[GreenSock]

5 hours ago, alexandrosb said:

1. I was in a rush to make the gif to better explain the issue, but it happens even if I move my finger really slow

 

If you remove the tween in the onRelease, are you saying you can keep dragging without any problems at all? Does onRelease ever get called (unexpectedly) during your drag in that scenario?