Hacer que una fila de la tabla anime el movimiento ascendente en la interfaz de usuario ordenable

Question

Estoy usando la interfaz de usuario de jQuery ordenable para permitir a los usuarios arrastrar y soltar filas de la tabla. Esto permite a los usuarios clasificar los artículos en una tabla según sus preferencias. Una vez que un usuario ha terminado de ordenar su lista, presiona un botón guardar que ejecuta una llamada Ajax. El nuevo rango se guarda en la base de datos y la tabla se resalta brevemente.

Ahora he agregado un botón adicional que enviará un artículo directamente a la parte superior de la lista. También es ajax. Funciona muy bien, excepto que me gustaría agregar un efecto de transición donde el <tr> se separará y arrastrará a la parte superior de la tabla, y empujará hacia abajo las siguientes filas. es posible? Aquí está el código que estoy usando:

Este código controla la llamada a guardar los cambios en la base de datos de la función "arrastrar y soltar":

<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); 
      } 
     }); 
} 

El código siguiente es el nuevo "enviar -item-to-top "botón que agregué. Esto es cuando me gustaría que la transición ocurra:

<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

Creo que he leído en alguna parte que es más difícil para agregar filas de la tabla a una tabla existente. tiene algo que ver con algunos navegadores que agregan una etiqueta tbody para usted y otros navegadores a los que no les gusta una etiqueta tr que no tiene una etiqueta de tabla alrededor (es decir).

si es posible, podría convertir su tabla en divs (o posiblemente lis), entonces creo que podría evitar este problema. Creo que el draggable de jQueryUI tiene esta limitación, no estoy seguro.

si no es posible alejarse de las tablas, probablemente pueda ocultar la fila, luego mover instantáneamente la fila a la posición, crear un div que se parezca y moverlo, luego después de la animación matará la animación div y muestra la nueva fila.

hth