Utilisation de jQuery pour re-commander et animer les éléments de la liste?

Donc, j'ai une liste d'éléments, quelque chose comme:

<ul id="listHolder">
    <li id="l1">List item 1</li>
    <li id="l2">List item 2</li>
    <li id="l3">List item 3</li>

etc.
Un appel ajax est déclenché périodiquement, et j'ai peut-être besoin de revoir l'ordre de la liste (en faisant l'un des éléments inférieurs de devenir le premier dans la liste). C'est facile à faire en modifiant le code HTML de #listHolder, mais je voudrais animer de sorte que l'élément approprié se déplace vers le haut de la page au bon endroit, et que les autres se déplacent vers le bas.

J'ai aucune idée de par où commencer =/

NB. Il n'a pas à être une liste: un div ou de tout autre élément, ce serait bien.

OriginalL'auteur Grim... | 2011-11-14

  1. 15

    D'accord, je l'ai fait - c'était plus facile que je l'imaginais.

    http://jsfiddle.net/Vyhph/

    Notez que si vous cliquez sur plus d'une liste d'objets à l'intérieur d'une seconde, tout va mal. Vous pouvez facilement arrêter, mais ce ne sera pas un problème pour moi.

    $("li").live("click", function() {
    var $myLi = $(this);
    var $myUl = $(this).parent();
    var listHeight = $myUl.innerHeight();
    var elemHeight = $myLi.height();
    var elemTop = $myLi.position().top;
    var moveUp = listHeight - (listHeight - elemTop);
    var moveDown = elemHeight;
    var liId = $myLi.attr("id");
    var enough = false;
    var liHtml = $myLi.outerHTML();

    $("li").each(function() {
        if ($(this).attr("id") == liId) {
            return false;
        }
        $(this).animate({
            "top": '+=' + moveDown
        }, 1000);
    });

    $myLi.animate({
        "top": '-=' + moveUp
    }, 1000, function() {
        $myLi.remove();
        var oldHtml = $myUl.html();
        $myUl.html(liHtml + oldHtml);
        $myUl.children("li").attr("style", "");
    });
});

(function($) {
    $.fn.outerHTML = function() {
        return $(this).clone().wrap('<div></div>').parent().html();
    }
})(jQuery);
    génial, heureux que vous avez quelque chose qui fonctionne pour vous! Désolé de ne pas avoir plus de temps pour code mon idée. Sidenote, mettre le code sur stackoverflow.com ainsi. De cette façon, votre réponse sera disponible tant que le site est en place. jsfiddle peuvent modifier leurs politiques d'accès à tout moment.
    Bon appel. 4321
    parfait!!! n'oubliez pas d'ajouter { position: relative } <ul>

    OriginalL'auteur Grim...

  2. 4

    Personnellement, je voudrais saisir de jQuery UI Sortable de fonctionnalité et de déclencher les événements sur ajax succès. jetez un oeil à ce la documentation et laissez-moi savoir si vous aimez l'idée. Je vais essayer de trouver un peu de temps entre les réunions de code d'un exemple si vous.

    Je suis heureux avec tout ce qui va fonctionner. C'est donc au tour de la liste dans un .sortable(), puis d'animer les objets "à la main", comme il était? Je vais donner un coup de feu.
    Aller, voir ma réponse ci-dessous. Bien que je n'ai pas sortable à la fin, vous encore m'a orienté dans la bonne direction. Des acclamations.
    Est-il un moyen de simuler le réorganiser des éléments de la liste automatiquement, sans que l'utilisateur en les faisant glisser et en les déposant?

    OriginalL'auteur DefyGravity