jQuery ui draggable: saving the position of the element

daisydoos
daisydoos used Ask the Experts™
on
Hi,

With the draggable plugin, am able to record the position of the element after its been dragged like this:

$(function() {      
    $("#d1").draggable({
      containment:'parent',
        opacity:0.35,
    stop: function(event, ui)
    {
            $("#x").val(ui.position.left);
        $("#y").val(ui.position.top);
     }
   });

  });

All ok ... I can save then resulting x and y values to my database.

However, when you display the page again, retrieving the x-y coordinates from the database, how do you position the element with these?

I tried applying inline css to the element using them - which works - but when you start to drag the element around again, the x-y coordinates that are recorded are those relative to it's new position, rather than the position relative to the top left hand corner of the parent (containing) container.

Any help much appreciated!

Cheers,

Daisy
      
   
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2008
Top Expert 2008
Commented:

>>rather than the position relative to the top left hand corner of the parent (containing) container. 
make your elements:
 
position:absolute
 
and then assign the saved coordinates:
 
$(
function()
{
  $("#x").css({'position':'absolute','top':'23px', 'left':'54px'});
}
);
 
Instead of 23 and 54, you need to use whatever values you saved from before.

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial