Draggable snapping problem

Draggable snapping problem


Hi,
In my page I have a number of objects (imgs) that user can drag and
drop into a #dropzone div. These objects can snap to each others
edges. When I drop an object to #dropzone, I have to clone it and it
to the #dropzone. However while during the drag operation the objects
snap together, as soon as I drop the object it goes to an incorrect x
and y position.
I have uploaded the Web page with all the JS files to:
https://dl.getdropbox.com/u/34024/Snap-jQuery.zip
However the relevant parts are pasted here:
<body>
        <div id="objects">
            <img class="object" src="images/600x1200.png" alt="" />
        </div>
        <div id="dropzone">
        </div>
        <script>
            var _ev;
            var _ui;
            $(".object").draggable({revert: true, snap: '#dropzone .object'});
            $("#dropzone").droppable({
                accept: ".object",
                drop: function(ev, ui) {
                    _ev = ev;
                    _ui = ui;
                    $(this).append('<img src="images/600x1200.png" class="object"
style="position: absolute; top: ' + ui.absolutePosition.top + 'px;
left: ' + ui.absolutePosition.left + 'px;" />');
                }
            });
        </script>
    </body>
Any ideas what is wrong with the above code and how can I fix it?