dragdrop保存定位问题

Question

I am currently using a dragdrop script and saving the left and top coordinates of the (position: relative) div(s). My problem is the co-ordinates at which they are saved are not always the same position (as placed) when I reload.

The divs are within a container with a given height and width (this container restrains the divs to only move inside it - perimeter div)

So I am trying to get the co-ordinates to only work/space within the DIV and not the entire page.

I'm using PHP to get the correct divs/widgets for that page which gives the widget class (background and other css based variables)

All widgets have a custom ID in case there is more than one of a particular widget

This is my main code:

<?
    $load = mysql_query("SELECT * FROM `widgets` WHERE `page`='1' AND `show`='yes'")or die(mysql_error());
    while($widget = mysql_fetch_array($load)){
?>
<div id="<? echo $widget['id']; ?>" style="left: <? echo $widget['left']; ?>px; top: <? echo $widget['top']; ?>px;" class="<? echo $widget['widgetid']; ?> draggable ui-widget-content" onmouseup="find('<? echo $widget['id']; ?>','1')"> </div>
<? } ?>

This is my Javascript for saving:

function find(id, page){
    var position = $("#"+id).position();
    $.ajax({
        type: "POST",
        url: "save.php",
        data: "l=" + position.left + "&t=" + position.top + "&request=" + page + "&w=" +id,
        success: function(msg){
            var element = document.getElementById(id);
            element.style.opacity = "1.0";
        }
    });
}

l is left, t is top, both sent onmouseup (w = widgetid, request = pageid)

The variables are saving to the database just not being placed on the page correctly (either moving far to the right or up slightly)

Any help would be greatly appreciated!

Thank you in advance

Answer 1

As stated in the jQuery docs on .position():

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

If you keep reading, it says

Contrast this with .offset(), which retrieves the current position relative to the document.