Creating a table row to change the upward movement in a sorted user interface

Question

I am using Sortable jQuery UI to allow users to drag and drop rows of a table. This allows users to rank items in a table based on their preferences. After the user has finished ordering their list, they press the save button, which makes an Ajax call. The new rank is stored in the database, and the table is highlighted briefly.

Now I have added an extra button that will send the item right to the top of the list. This is also ajax. It works very well, except that I would like to add a transition effect when <tr> breaks off and drags itself to the top of the table, and click the following lines down. Is it possible? Here is the code I'm using:

This code processes the call to save changes to the database from the drag and drop function:

 <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 that I added. This is when I want the transition to occur:

 <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 adding table tables to an existing table is more difficult. it had something to do with some browsers, adding a tbody tag for you and other browsers that don't like the tr tag, which doesn't have a table tag attached to it (i.e.).

if possible, you can convert your table to a div (or maybe lis), then I think you can work around this problem. I think jQueryUI draggable has this limitation, not sure.

if moving from tables is not possible, you can probably hide the row, then instantly move the row to a position and create a div that will look like moving it, and then after the animation you kill the div animation and show a new row.

Hth