[jQuery] Interface: Rearranging a table by drag and drop

[jQuery] Interface: Rearranging a table by drag and drop


I am trying to implement a system whereby a user can rearrange rows in
a table by draggign and dropping them. I quickly made something
rather basic with the interface draggables and droppables but it's not
ideal. I suspect I'm not using it properly as I've seen drag and drop
tables before. Here's the code I'm using.
$(document).ready (function ()
{
    $('.favRow').Draggable ({
        containment        : 'parent',
        snapDistance    : 10,
        opacity            : 0.7
    });
    $('.favRow').Droppable ({
        accept    : 'favRow',
        ondrop    : function (dragged)
        {
            console.log (this);
            console.log (dragged);
            $(this).after (dragged);
        }
    });
});
.favRow is the class attached to each row in the table I want to
drag. Each row also has a unique ID. The problems are mainly with
the first and second items in the table. They sometimes don't swap
positions.