How to get mouse co-ordinates in drop event Javascript/Jquery

Question

I am only getting undefined:

 myele.bind('drop', function (e) {
            console.log("Dropped");
            if (e.pageX || e.pageY) {
               //store
            }
            else if (e.clientX || e.clientY) {
               //store
            }
            console.log("XPOS: " + e.clientX + " YPOS: " + e.pageY);
            return false;
        });

Output:

Dropped XPOS: undefined YPOS: undefined

EDIT

http://jsfiddle.net/fBT7X/2/

Answer 1

jQuery wraps the original drop event into a property called originalEvent so you have to access that to get the page/client properties

myele.bind('drop', function (e) {
   console.log("Dropped");
   if (e.originalEvent.pageX || e.originalEvent.pageY) {
      //store
   }
   else if (e.originalEvent.clientX || e.originalEvent.clientY) {
      //store
   }
   console.log("XPOS: " + e.originalEvent.clientX + " YPOS: " + e.originalEvent.pageY);
   return false;
});

JSFIDDLE DEMO Drag the green box to the red one

When you get an undefined on an object that you think has what you want, log the object to the console and look at it. In this case just log the event object and look through the properties

console.log(e);
   jQuery.Event {originalEvent: MouseEvent, type: "drop", isDefaultPrevented: function, timeStamp: 1396687578486, jQuery110104013205280061811: true…}
   altKey: false
   bubbles: true
   cancelable: true
   ctrlKey: false
   currentTarget: div#e
   data: null
   delegateTarget: div#e
   eventPhase: 2
   handleObj: Object
   isDefaultPrevented: function returnFalse() {
   jQuery110104013205280061811: true
   metaKey: false
   originalEvent: MouseEvent <---
      altKey: false
      bubbles: true
      button: 0
      cancelBubble: false
      cancelable: true
      charCode: 0
      clientX: 24   <---
      clientY: 64   <---
      ...
   relatedTarget: null
   ...