Mueva el elemento de la lista a la parte superior de la lista desordenada utilizando jQuery

Digamos que tengo la siguiente lista desordenada

 

Lo que estoy buscando es cuando hago clic en Tom, que se mueve (animado y sin arrastrar) a la parte superior de la lista (índice 0).

He considerado ordenar, pero no puedo encontrar una manera de activar la parte móvil programáticamente.

Encontré una solución que parece funcionar bastante bien. Es una prueba de concepto, por lo que probablemente tendrá que modificarlo un poco para que funcione mejor para su caso específico. Además, solo lo probé en Firefox, pero no veo ninguna razón por la que esto no funcione en todos los navegadores. De todos modos, aquí está:

   

Calcula la diferencia en las compensaciones entre el LI pulsado y el primer LI y mueve el clic hacia arriba estableciendo su position en relative y animando la propiedad top . Del mismo modo, calcula la cantidad de espacio dejado por el clic en LI y mueve a todos los anteriores en consecuencia. Cuando termina con las animaciones, reorganiza el DOM para que coincida con el nuevo orden y restaura los estilos de posicionamiento.

¡Espero que ayude!

Encontré esto aún más ordenado:

 $('li').on('click', function() { $(this).parent().prepend(this); });​ 

Ejemplo en vivo

Asumiendo:

  

entonces:

 $("#list a").click(function() { $(this).parent().before("#list a:first"); return false; }); 

Si quieres animar, entonces es un poco más difícil. Una opción:

 $("#list a").click(function() { $(this).parent().slideUp(500).before("#list a:first").slideDown(500); return false; }); 

Otra opción:

 $("#list a").click(function() { var item = $(this).parent(); var prev = item.prev(); while (prev.length > 0) { item.before(prev); prev = item.prev(); } return false; }); 

pero dudo que obtendrás una animación suave de esa manera.

Jugué con el violín No Surprises y extendí el código para intercambiar dos conjuntos arbitrarios de elementos (la única restricción es que deben seguirse directamente).

mira aquí: http://jsfiddle.net/ZXYZ3/139/

Se me ocurrió esta solución: http://jsfiddle.net/FabienDemangeat/TBYWw/

La idea es elegir el índice del elemento Li que se moverá y su destino. Si el valor de destino es inferior al índice del elemento li para moverse, el efecto se invertirá.

Algunas partes no son perfectas, pero puede ser un punto de partida. Me inspiré del fragmento proporcionado por “No Surprises”

La función principal swapLiElements intercambia dos elementos li y la función de callback como parámetros permite hacer más de un intercambio fácilmente ( ver violín ).

 function swapLiElements($northLi, $southLi, isPushingDown, duration, easing, callbackFunction) { var movement = $northLi.outerHeight(); // Set position of the li elements to relative $northLi.css('position', 'relative'); $southLi.css('position', 'relative'); // Set the z-index of the moved item to 999 to it appears on top of the other elements if(isPushingDown) $northLi.css('z-index', '999'); else $southLi.css('z-index', '999'); // Move down the first li $northLi.animate({'top': movement}, { duration: duration, queue: false, easing: easing, complete: function() { // Swap the li in the DOM if(isPushingDown) $northLi.insertAfter($southLi); else $southLi.insertBefore($northLi); resetLiCssPosition($northLi); resetLiCssPosition($southLi); callbackFunction(); } }); $southLi.animate({'top': -movement}, { duration: duration, queue: false, easing: easing, }); }