Использование jQuery для изменения порядка и анимации элементов списка? - PullRequest
Новая
       7

Использование jQuery для изменения порядка и анимации элементов списка?

12 голосов
/ 14 ноября 2011

Итак, у меня есть список предметов, что-то вроде: 

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

и т.д.. Вызов ajax периодически запускается, и мне может понадобиться переупорядочить список (сделав один из нижних пунктов первым в списке). Это легко сделать, просто изменив HTML-код #listHolder, но я бы хотел его анимировать, чтобы соответствующий элемент перемещался вверх по странице в нужное место, а остальные - вниз.

Понятия не имею, с чего начать = /

NB. Это не обязательно должен быть список: div или любой другой элемент подойдет.

Ответы [ 3 ]

16 голосов
/ 14 ноября 2011

Хорошо, я сделал это - это было проще, чем я себе представлял.

http://jsfiddle.net/Vyhph/

Обратите внимание, что если вы щелкнете более одного объекта списка за секунду, все пойдет не так. Вы можете легко это остановить, но для меня это не будет проблемой. 

$("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);
4 голосов
/ 14 ноября 2011

Лично я бы взял функциональность сортировки пользовательского интерфейса jQuery и вызвал бы события в случае успеха ajax.взгляните на эту документацию и дайте мне знать, если вам понравилась идея.Я постараюсь найти время между встречами, чтобы написать пример, если вы.

0 голосов
/ 02 января 2013

Мне не очень понравилась идея клонирования элементов, и я пытался создать визуализацию таблицы лидеров, не особо желая менять DOM, поэтому я сделал это по-другому, используя атрибуты данных и некоторые базовые математические вычисления. *

html: 

        <ol id="leaderboard">
            <li class="leaderboarditem" data-key="A" data-rank="0"><span class="tag">A</span><span class="tagvalue">0</span></li>
            <li class="leaderboarditem" data-key="B" data-rank="1"><span class="tag">B</span><span class="tagvalue">0</span></li>
            <li class="leaderboarditem" data-key="C" data-rank="2"><span class="tag">C</span><span class="tagvalue">0</span></li>
        </ol>

стиль: 

        .tag, .tagvalue { display: inline-block; }
        .tag { padding-left: 1em; width: 50%; font-weight: bold; background-color: rgb(235, 235, 235); }
        .tagvalue { border-left: 10px solid rgb(235, 235, 235); border-right: 10px solid rgb(235, 235, 235); border-top: 50px solid white; border-bottom: 50px solid white; padding-left: 1em;padding-right: 1em; }
        .leaderboarditem { display: block; width: 100%; font-size: 67pt; line-height: 119pt; font-weight: bold; position: relative; top: 0px; left: 0px; }

(ключевая вещь в стиле - позиция: относительная и отображение: блок)

JavaScript: 

function (f, msg) {
    var leaderboard, key_count, key, value, tag, tag_value, list_item;

                console.log(JSON.stringify(msg));

                leaderboard = {
                    element : $('#leaderboard'),
                    data : []
                };

                key_count = 0;
                for (key in msg) {
                    ++key_count;
                    value = msg[key];

                    list_item = $('.leaderboarditem[data-key=' + key.toUpperCase() + ']');
                    tag_value = list_item.find('.tagvalue').text(value);

                    leaderboard.data.push({ k: key.toUpperCase(), v: value, item: list_item });
                }

                leaderboard.data.sort(function (a, b) {
                    var a_value = a.v;
                    var b_value = b.v;
                    return b_value - a_value;
                });

                leaderboard.data.forEach(function(datum, rank) {
                    var old_rank, line_height, move_distance;

                    old_rank = datum.item.data('rank');

                    if (old_rank != rank) {
                        line_height = datum.item.height();
                        move_distance = (line_height * rank) - (line_height * old_rank);

                        datum.item.animate(
                            {'top' : '+=' + move_distance },
                            1e3,
                            function () {
                                datum.item.data({ 'rank' : rank });
                            }
                        );
                    }
                });

            }
        }
...