CODEWITHSUNDEEP
jquery
blue-sky
blue-sky

Reputation: 53796

Retrieving X & Y position of jQuery element

I need to retrieve the X & Y position of an element once its dropped, how can I implement this ?

I think I need to use the droppable callback : 

$(".portletPlaceHolder").droppable({
    drop: function( event, ui ) {
        //...
    }
});

Upvotes: 3

Views: 12135

Answers (3)

Code Spy
Code Spy

Reputation: 9954

Use .offset()

<script>
   var p = $("p:last");
   var offset = p.offset();
   p.html( "left: " + offset.left + ", top: " + offset.top );
</script>

http://api.jquery.com/offset/

UPDATE

http://www.jquery4u.com/snippets/jquery-coordinates-element/#.T7YW7Nz9Mi0 http://www.quirksmode.org/js/dragdrop.html http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/clientX.htm

This one is Awsm Show Dynamic Coordinates of cursor movement

http://www.diffusedreality.com/content.html

Upvotes: 2

benqus
benqus

Reputation: 1139

Mate, you should read the whole page on a documentation:

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

  • ui.draggable - current draggable element, a jQuery object.
  • ui.helper - current draggable helper, a jQuery object
  • ui.position - current position of the draggable helper { top: , left: }
  • ui.offset - current absolute position of the draggable helper { top: , left: }

droppable jQuery manual

$(".portletPlaceHolder").droppable({
    drop: function (evt, ui) {
        var offset = ui.offset;
        console.log(offset.left + "x" + offset.top);
    }
});

Upvotes: 5

jbduzan
jbduzan

Reputation: 1126

you could use the position() function who retrieve the top and left position

$('yourselector').position();

Upvotes: -1

Related Questions