jQuery Forum

I've got a table that contains elements. I want the user to be able
to drag & drop elements (divs) from one cell in the table to another.
When you drop an element on to another cell, I want the two cells to
swap their elements. And I want both elements to appear in their
respective cells as though they had been placed there originally.
I've got the code working but the problem is that the element that is
dropped on to the target cell is offset from its new home the distance
it was dragged from the original cell, so it doesn't look like it's
actually in the target cell. I'm not sure what I have to do to get it
back where it belongs.
Here's the code I've written. Can someone tell me how I get the thing
to appear in the right place?
    jQuery(".draggable").draggable();
    jQuery(".droppable").droppable({
        drop:    function(event, ui) {
                    // Get references to the HTML objects for the table cells
involved in the swap
                    var src_cell = ui.draggable.context.parentNode;
                    var dst_cell = this;
                    // Get refrences to the HTML objects for the divs in the table
cells
                    var src_div = ui.draggable.context;
                    var dst_div = this.childNodes[1];
                    // Swap the divs between the two cells
                    src_cell.removeChild( src_div );
                    dst_cell.removeChild( dst_div );
                    src_cell.appendChild( dst_div );
                    dst_cell.appendChild( src_div );
                    // Fix the offsets of the src & dst divs
                    // src_div.offsetLeft = src_div.offsetTop = 1;
                    // Get the target row & column coordinates
                    var dst = dst_cell.id.split('-');
                    var dst_row = dst[1];
                    var dst_col = dst[2];
                    return true;
                }
    });
Thanks
Tony