Grow your CSS skills. Land your dream job.

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.

    http://codepen.io/anon/pen/nLGIl

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

    Thanks

    # 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;

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

    $(‘.dragThis’).click(function(){
    $(this).addClass(‘top’).removeClass(‘bottom’);

    $(this).siblings().removeClass(‘top’).addClass(‘bottom’);
    $(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.

*May or may not contain any actual "CSS" or "Tricks".