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

[Gordon]

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.