I use jQuery and draggable from jqueryUI. When I update jQuery from 1.6 to 1.7 clientX and pageX attributes disappeared from event variable. Here is an example:
http://jsbin.com/ezulas/7/edit
If in given example jQuery version is changed to 1.6.4 - it starts working. With latest release - both clientX/Y and pageX/Y are not working. I discovered I can use e=e.originalEvent - but that doesn't seems to be the proper solution.
event.layerX and event.layerY: We have removed these non-standard
properties in version 1.7. Although we normally would have gone
through a deprecation notice period for these, Chrome version 16
generates a flood of console warning messages on the page. Because of
this, we decided to remove them immediately. On platforms that still
support these properties, they are available through
event.originalEvent.layerX and event.originalEvent.layerY.
Source: http://blog.jquery.com/2011/11/03/jquery-1-7-released/
When you console.log(e);
inside your dragstop
event handler you can see that all the x
/y
coordinate data is missing in jQuery 1.7; but it can be accessed in event.originalEvent
.
UPDATE
If you look around in the event
object you can find pageX
/pageY
in the origionalEvent
property:
$('#test').html(e.originalEvent.pageX+','+e.originalEvent.pageY);
Here is an updated version of your jsbin: http://jsbin.com/ezulas/13/edit
I had the same problem and was searching similar threads for quite a while.
It is now fairly late, but I hope this will still save some happy coders from despair.
I checked the jQuery UI Touch Punch file that I was also using in my project and found how it refers to the x/y position.
This is what eventually worked for me:
$('.pages').on('touchstart vmousedown', function(e){
var this_event_touch_start_Y = e.originalEvent.changedTouches[0].clientY;
var this_event_touch_start_X = e.originalEvent.changedTouches[0].clientX;
});
For reference, here a list of all jQuery files I am using:
- jquery-3.1.1.min.js
- jquery.touchSwipe.min.js
- jquery-ui.min.js
- jquery.ui.touch-punch.min.js
- jquery.mobile-1.4.5.min.js
In the jQuery docs for Event Object it says
The following properties are also copied to the event object, though some of their values may be undefined depending on the event:
altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedTarget, screenX, screenY, shiftKey, target, view, which
Which seems to fit what you are saying. In your situation your event does not have pageX and pageY defined.