Making a table row animate upward movement in sortable UI

Question

I'm using Sortable jQuery UI to allow users to drag and drop table rows. This allows users to rank items in a table based on their preference. Once a user has finished ordering his list, they press a save button which executes an Ajax call. The new rank is saved into the database and the table highlights briefly.

I have now added an additional button that will send an item straight to the top of the list. It's also ajax. It works very well except that I would like to add a transition effect where by the <tr> will break away and drag itself to the top of the table, and push the following rows down. Is this possible? Here is the code I'm using:

This code handles the call to save changes to the database from the "drag-and-drop" feature:

<input type="button" value="Save Queue" id="saveButton" class="list-button">

$(document).ready(function(){
    $("#sortable").sortable();
    $("#saveButton").click(persist);
});

// Persist function (save order)
function persist() {
    var data = $("#sortable").sortable('toArray');
        $.ajax({
            traditional: true,
            url: "/gz/index.cfm/membros/rankListByAjax?order="+data, 
            type: "POST", 
            success: function(msg){ 
            $("#sortable tr").effect("highlight", {}, 1000);
            } 
        });
}

The following code is the new "send-item-to-top" button I added. This is when I would like the transition to happen:

<form ...onsubmit="

$.ajax({ 
dataType: 'script', 
type: 'post', 
url: '/gz/index.cfm?controller=membros&amp;action=send-item-to-top&amp;key=1082&amp;format=js&amp;modType=replace',
data: $(this).serialize(), 
success: function(data, textStatus){$(this).attr('disabled','false');}, 
beforeSend: function(XMLHttpRequest){$(this).attr('disabled','true');}}); return false;" text="&uarr;">

Answer 1

i think i read somewhere that it is more difficult to add table rows to an existing table. it had something to do with some browsers adding a tbody tag for you and other browsers not liking a tr tag that doesn't have a table tag wrapped around it (ie).

if possible, you could convert your table to divs (or possibly lis) then i think you could get around this issue. i think jQueryUI's draggable has this limitation, not sure.

if moving away from tables is not possible, you can probably hide the row, then instantaneously move the row to position, and create a div that looks just like it and move that around, then after the animation you kill the animation div and show the new row.

hth