remove - jquery selector

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

Question

Digamos que tengo la siguiente lista desordenada

<ul>
 <li><a>Hank</a></li>
 <li><a>Alice</a></li>
 <li><a>Tom</a></li>
 <li><a>Ashlee</a></li>
</ul>

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 jquery clasificable, pero no puedo encontrar una manera de activar la parte móvil mediante programación.

Answer 1

Asumiendo:

<ul id="list">
 <li><a>Hank</a></li>
 <li><a>Alice</a></li>
 <li><a>Tom</a></li>
 <li><a>Ashlee</a></li>
</ul>

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 tengas una animación suave de esa manera.

Answer 2

Encontré esto aún más ordenado:

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

Ejemplo vivo

Answer 3

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

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

Answer 4

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 mover, el efecto se invertirá.

Algunas partes no son perfectas pero puede ser un punto de inicio. Me inspiré en el fragmento proporcionado por "Sin sorpresas"

La función principal swapLiElements intercambia dos elementos li y la función de devolución de llamada como parámetros permite realizar más de un intercambio fácilmente ( http://jsfiddle.net/FabienDemangeat/TBYWw/ ).

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

}

Answer 5

Se me ocurrió 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á:

<script type="text/javascript">
  $(document).ready(function() {
    $(''li'').click(function() {
      // the clicked LI
      var clicked = $(this);

      // all the LIs above the clicked one
      var previousAll = clicked.prevAll();

      // only proceed if it''s not already on top (no previous siblings)
      if(previousAll.length > 0) {
        // top LI
        var top = $(previousAll[previousAll.length - 1]);

        // immediately previous LI
        var previous = $(previousAll[0]);

        // how far up do we need to move the clicked LI?
        var moveUp = clicked.attr(''offsetTop'') - top.attr(''offsetTop'');

        // how far down do we need to move the previous siblings?
        var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

        // let''s move stuff
        clicked.css(''position'', ''relative'');
        previousAll.css(''position'', ''relative'');
        clicked.animate({''top'': -moveUp});
        previousAll.animate({''top'': moveDown}, {complete: function() {
          // rearrange the DOM and restore positioning when we''re done moving
          clicked.parent().prepend(clicked);
          clicked.css({''position'': ''static'', ''top'': 0});
          previousAll.css({''position'': ''static'', ''top'': 0}); 
        }});
      }
    });
  });
</script>

<ul>
 <li><a>Hank</a></li>
 <li><a>Alice</a></li>
 <li><a>Tom</a></li>
 <li><a>Ashlee</a></li>
</ul>

Calcula la diferencia en las compensaciones entre la LI y la primera LI y mueve la pulsada hacia arriba, estableciendo su position en relative y animando la propiedad top . Del mismo modo, calcula la cantidad de espacio que dejó el botón LI pulsado y mueve todos los anteriores hacia abajo 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!