The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

X & Y positions of multiple draggable elements

  • # June 25, 2013 at 5:39 am

    Hi Guys (and Gals),

    First thread for me so be kind ;)

    Basically im trying to get the position of multiple draggable elements using jQuery UI.
    As you can see in the preview below, when I drag one element the X Y co-ordinates of the other element changes as well.

    Please can someone assist me in getting the separate positions of multiple draggable items.


    # June 25, 2013 at 5:44 am

    Well, it’s no surprise. You define text for `.posX` and `.posY` which are present in both draggable elements. Define your selectors more precisely.

    # June 25, 2013 at 5:44 am

    Solved … dooh

    $(document).ready(function() {
    var a = 3;

    start: function(){
    $(this).css(“z-index”, a++);
    drag: function(){
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos =;
    $(this).find(‘.posX’).text(‘x: ‘ + xPos);
    $(this).find(‘.posY’).text(‘y: ‘ + yPos);


    $(this).css(“z-index”, a++);


    # June 25, 2013 at 5:46 am

    It was easy enough. :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed