Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript X & Y positions of multiple draggable elements

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #45824
    BleepyEvans
    Member

    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

    #140326
    Kitty Giraudel
    Participant

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

    #140330
    BleepyEvans
    Member

    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++);
    });

    });

    #140334
    Kitty Giraudel
    Participant

    It was easy enough. :)

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.