How correctly store position of draggable items

[eluser]darian311[/eluser]
I'm trying to store the position of some image elements after allowing the user to drag them around on top of my game frame.
However everytime I retrieve the offsetLeft and the offsetTop values, they end up moving further left and to the right, instead of showing up at the exact locations as before.

What's the best way to get and store the new positions of htmlelements after a user has dragged them around inside a div?
My source is included.

If there's a best practice for this, I haven't found it yet.

If it helps here's the rendered source too:

Code:

function handleDrop(event, ui){
  
  var dropped = $(ui.draggable).context;
  //this has left and top offset from parent td  that we need for storing location.
     console.log(dropped.offsetLeft +", "+ dropped.offsetTop);
      // i need unique id's that match ids in village state.
      var item = globals['villagestate']['village'][dropped.id];
      item['x'] = dropped.offsetLeft;
      item['y'] = dropped.offsetTop;
      
      //hopefully this stores the needed coordinates for storing the village. s
      globals['villagestate']['village'][dropped.id] = item;
  }

[eluser]CroNiX[/eluser]
Would be better to use a "sortable" from jQuery ui over a draggable. That's what it's purpose is and has methods to give you the order of the items in the sortable.
http://jqueryui.com/demos/sortable/

[eluser]weboap[/eluser]
add to @CroNiX answer
http://www.cs.rit.edu/~rjb6296/jquery_demo/ from
http://old.nabble.com/saving-portlet-sta...27240.html

hope it help.