[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;
}