I'm attempting to get it so it displays the x/y coordinates as an object is dragged accross the screen. For some reason, it seems the coordinates are always 1 step off as I drag it. The following is the the function I am using to initialize the draggable:
newTextboxParent.draggable
(
{
containment: 'parent',
addClasses: false,
drag: function()
{
$(this).draggable('option', 'grid', ($('#snapGrid').attr('checked') ? [ parseInt($('#grid_x').val()), parseInt($('#grid_y').val()) ] : false));
var position = $(this).position();
$('#location_x').val(position.left);
$('#location_y').val(position.top);
setHorizontalGuide();
setVerticalGuide();
}
}
);
When it drag it, say 1 pixel to the right, the "location_x" still shows it is "0", when I drag it 1 more to the right, it says "1". If I at that point reverse it, and move it 1 pixel to the left, it says "2", one more to the left, it says "1", even though it is actually at the "0" position. I have it set to be contained within its parent, so it can't move to the left any more. However, if I continue the mouse movement to the left, it does eventually set the "location_x" to "0", but the object doesn't move any further. This behavior applies to the "y" coordinates, as well, and happens in all browsers. I don't know if it is something I'm doing wrong, or if this is just the way jquery ui behaves? Any thoughts?