dragEnd event Properties 'clientX' and 'clientY' are undefined on iOS

[David McNamaraMember]

In a proof of concept I am working on I process the dragEnd event fired by the jqxListbox component.

Within my event handler I am using the clientX and clientY properties form the returned event object in order to determine exactly where the drop operation occurred. This works well on desktop browsers (IE9, Firefox, Chrome on Windows and Safari on OSX) but when I use Safari on iOS, the clientX and clientY properties are both undefined (as are pageX and pageY, although I’m not using those ones).

Is this an oversight, or is there an alternative method that I should be using?

Thanks,
David.

Sorry, I should have pointed out that I am actually getting those properties from event.args.originalEvent, so it may be that I’m not supposed to be accessing the values from there. If not, is thare an alternative way i can get the xlientX and clientY values?

[Peter StoevKeymaster]

Hi David,

The originalEvent is ‘mouseup’ or ‘touchend’ depending on the device – pc or touch. Touch events do not work the same way as mouse events and you get different parameters. As you may have multiple touches, the touch event has ‘touches’ field which returns an array of touches. The sample code below gets the array of touches in a touch event:

getTouches: function (e) {
            if (e.originalEvent) {
                if (e.originalEvent.touches && e.originalEvent.touches.length) {
                    return e.originalEvent.touches;
                } else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {
                    return e.originalEvent.changedTouches;
                }
            }
            if (!e.touches) {
                e.touches = new Array();
                e.touches[0] = e.originalEvent;
            }
            return e.touches;
        }

 var touches = me.getTouches(event);
 var touch = touches[0];
 var pageX = touch.pageX;
 var pageY = touch.pageY;

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[David McNamaraMember]

Hi Peter,

I have tried to use the code you supplied from within my dragEnd event handler, but some of the items you refer to (such as event.originalEvent and event.touches) are undefined within the event structure I’m being passed on iOS.

Since I have yet to discover a browser for the iPad that will let me set breakpoints as Firefox/Firebug does on the Windows desktop, I have been debugging by writing the values of various objects from the event structure into my HTML document and this is what I get:

Safari on iPad

event.originalEvent=undefined
event.touches=undefined
event.pageX=undefined event.pageY=undefined
event.args.originalEvent=[object Object]
event.args.originalEvent.clientX=undefined event.args.originalEvent.clientY=undefined
event.args.originalEvent.pageX=undefined event.args.originalEvent.pageY=undefined
event.args.originalEvent.touches=undefined


Firefox on Windows

event.originalEvent=undefined
event.touches=undefined
event.pageX=undefined event.pageY=undefined
event.args.originalEvent=[object Object]
event.args.originalEvent.clientX=276 event.args.originalEvent.clientY=100
event.args.originalEvent.pageX=276 event.args.originalEvent.pageY=100
event.args.originalEvent.touches=undefined


Regards,
David.

[Peter StoevKeymaster]

Hi David,

The code I posted you i.e the getTouhes function assumes that ‘e’ is a ‘touchend’ event, not ‘dragEnd’.

Actually, this is already done in the demos provided with the installation:

See the Online Demo here:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/dragdrop.htm?classic

And this is the code for getting Location:

              $("#listBoxA, #listBoxB").bind('dragEnd', function (event) {
                    $("#dragEndLog").text("Drag End");
                    if (event.args.label) {
                        var ev = event.args.originalEvent;
                        var x = ev.pageX;
                        var y = ev.pageY;
                        if (event.args.originalEvent.originalEvent.touches) {
                            var touch = event.args.originalEvent.originalEvent.changedTouches[0];
                            x = touch.pageX;
                            y = touch.pageY;
                        }
                        var offset = $("#textarea").offset();
                        var width = $("#textarea").width();
                        var height = $("#textarea").height();
                        var right = parseInt(offset.left) + width;
                        var bottom = parseInt(offset.top) + height;
                        if (x >= parseInt(offset.left) && x <= right) {
                            if (y >= parseInt(offset.top) && y <= bottom) {
                                $("#textarea").val(event.args.label);
                            }
                        }
                    }
                });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[David McNamaraMember]

Thanks Peter, that is exactly the information I needed.

My listbox drag and drop is now working on the iPad.

Kindest regards,
David

[Author]

Posts