Draggable.onDrag : pageX and pageY undefined on touchscreen devices

[holgersindbaek]

I have a new Draggable issue. I need to retrieve event.pageX and event.pageY in the Draggable.onDrag method.

 

This works fine, and as expected, on my desktop, using a mouse.

 

It is broken in my RCA Cambio Win 10 touchscreen device (Chrome), when using touch to drag the Draggable (it works if I use the device's mousepad). The issue is that event.pageX and pageY are both undefined.

 

I have a demo page at my site.

 

Draggable.onDrag docs indicate that event.pageX and pageY should be accessible and defined when dragging:

onDrag:  Function - a function that should be called every time the mouse (or touch) moves during the drag. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onDragScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent(last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc.

 

So far, I'm having a lot of success switching over to use the Draggable.onClick method instead of the click handlers in my site's framework as mentioned in my previous post. Fixing this issue could be the last thing that I need to make it work.

 

Advice? Am I missing something, or is this a bug?

[holgersindbaek]

Additional info: I tested this on my RCA Cambio Win 10 using three different browsers: Chrome, Internet Explorer, and Edge. Event.pageX and pageY are undefined only in one of these, Chrome Version 76.0.3809.100 (Official Build) (32-bit).

 

Edit: I tested this on an iPad, and the issue does not show up in Safari or Chrome. It seems to be isolated to Chrome + Win touchscreen devices. Can anyone verify?

[ZachSaucier]

11 hours ago, marya said:

Can anyone verify?

On my Windows touchscreen laptop Chrome gives me undefined on touch + drag, Firefox gives me 0,0 on touch + drag, and IE and Edge gives me numerical values as it should. 

[GreenSock]

Have you tried using the Draggable instance's pointerX and pointerY values? That's one of the ways it smooths out cross-browser differences. 

 

And to be clear, the docs don't indicate that the event will always have pageX/pageY values - it has no control over that. It simply passes along whatever it gets from the browser. 

[holgersindbaek]

Woohoo! Draggable's pointerX and pointerY do the trick.

 

I added a query string to the existing demo page to demonstrate this new implementation, which uses this.pointerX and this.pointerY.

 

@GreenSock I'd suggest adding the information that you gave above about pageX and pageY to the onDrag documentation. I don't know if this is spelled out anywhere, but the docs led me to believe that pointerX and pointerY were identical to event.pageX/pageY. It didn't occur to me that using those would give different results from what I was doing.

 

@ZachSaucier Thanks much for verifying!

You reminded me that I should test on Firefox. I installed, and the new implementation also works fine with Firefox.

[OSUblake]

19 hours ago, marya said:

I'd suggest adding the information that you gave above about pageX and pageY to the onDrag documentation. I don't know if this is spelled out anywhere, but the docs led me to believe that pointerX and pointerY were identical to event.pageX/pageY. It didn't occur to me that using those would give different results from what I was doing.

 

I'm not trying to call you out, or anything like that. This is just a little FYI. event.pageX/pageY don't exist on touch events. They never have, and never will. To read the pageX/pageY property for a touch event, you will need to look in the event.changedTouches, event.targetTouches, or event.touches property of the event, which is an array.  

 

https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches

https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches

https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches

 

Those properties are inside an array because you might have more than one pointer. Remember, the average human has 10 pointers on their hands. ?️?️

 

 

23 hours ago, ZachSaucier said:

On my Windows touchscreen laptop Chrome gives me undefined on touch + drag, Firefox gives me 0,0 on touch + drag, and IE and Edge gives me numerical values as it should. 

 

Some people love to hate on IE/Edge, but Microsoft did get one thing right with those browsers, PointerEvents. ?

https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

 

IE/Edge gives you the correct numerical value, because IE/Edge uses PointerEvents, which have an event.pageX/pageY property. Microsoft browsers don't use touch events, and thankfully, the other browsers have started to follow suit.

 

For more information, here's a good article about how to work with touch and PointerEvents.  

https://developers.google.com/web/fundamentals/design-and-ux/input/touch/#add_event_listeners

 

Again... that was just a little FYI about why event.pageX.pageY might be undefined in the event passed into a Draggable callback. I don't think there is a practical reason why you would ever need to use the event passed into a Draggable callback. If you stick to using the API provided by Draggable, you shouldn't encounter too many problems.

 

 

 

[holgersindbaek]

4 hours ago, OSUblake said:

Again... that was just a little FYI about why event.pageX.pageY might be undefined in the event passed into a Draggable callback. I don't think there is a practical reason why you would ever need to use the event passed into a Draggable callback. If you stick to using the API provided by Draggable, you shouldn't encounter too many problems.

For this reason, also, I'd suggest reworking the documentation for Draggable to make it more clear that pointerX and pointerY are preferable, whereas event.pageX and pageY are to be avoided unless you really know what you're doing (which I did not).

[ZachSaucier]

1 hour ago, marya said:

I'd suggest reworking the documentation for Draggable to make it more clear that pointerX and pointerY are preferable

I'm in the process of redoing the docs for the new version anyway, so I will make sure to be more clear on this point.