- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
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
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
Well, it’s no surprise. You define text for `.posX` and `.posY` which are present in both draggable elements. Define your selectors more precisely.
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++);
});
});
It was easy enough. :)