Get position correct for multiple drag and drops

Question

I have two droppable divs and several images that I drag around between them. Every time an image is dragged and dropped I need to know which droppable div it was dragged from, what position it was dragged from, which droppable div it was dragged into and the position it was dragged into. All this information is then persisted so I have a complete history of all moves made by an image.

I have got this working by saving the drag start information, and changing the div of the draggable when it is dropped. However the iamges do not stay in the location they have been dragged - I guess this is because their position is relative to the div they where in when dropped.

Any ideas on a simple way of achieving this simple functionality?

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

    var origleft;
    var origtop;
    var origZ;

    $(function() {
        //define config object
        var dragOpts = {
        start: getDragStartPos,
            cursor: "move"
        };

        // Make lemons image draggable
        $("img.lemons").draggable(dragOpts);

        // Make dish div droppable
        $("#dish").droppable({
        drop: function(event, ui) {
            $(ui.draggable).appendTo($(this));
            saveDropDetails(ui.draggable.attr('id'), $(this).attr('id'), ui.absolutePosition.top, ui.absolutePosition.left, origleft, origtop, origZ);
            }
        });
        // Make table div droppable
        $("#table").droppable({
        drop: function(event, ui) {
            $(ui.draggable).appendTo($(this));
            saveDropDetails(ui.draggable.attr('id'), $(this).attr('id'), ui.absolutePosition.top, ui.absolutePosition.left, origleft, origtop, origZ);
            }
        });
    });

    function getDragStartPos(event, ui) {
        origleft = event.clientX;
        origtop = event.clientY;
        origZ = $(this.parentNode).attr('id');
    }
    function saveDropDetails(dragId, dropId, dropPosTop, dropPosLeft, origleft, origtop, origZ) {
        alert("dragId is : " + dragId + ",dropId is : " + dropId + ",dropPosTop is : " + dropPosTop + ",dropPosLeft is : " + dropPosLeft + " origTop is " + origtop + " origLeft is " + origleft + " originZ is " + origZ);
    }
</script>

<h2>Drag and drop the lemons</h2>
    <div id="lemonregion" style = "position:absolute"></div>

    <div id = "table" style = "background-color:Blue; position:static">TABLE
          <%foreach (var aLem in Model.Table)    
          { %>
             <img id = "<%=aLem.LemonId %>", alt ="<%=string.Format("Lemon{0}", aLem.LemonId) %>" src="../../Images/extract.png" style ="padding-left:25px" class = "lemons" />

        <%} %>

    </div>
    <br />
    <br />
    <br />

    <div id = "dish" style = "background-color:Gray; position:static" >DISH
    <p></p>
          <%foreach (var aLem in Model.Dish)    
          { %>
             <img id = "<%=aLem.LemonId %>", alt ="<%=string.Format("Lemon{0}", aLem.LemonId) %>" src="../../Images/extract.png" style ="padding-left:25px" class = "lemons" />

        <%} %>

    </div>