javascript 使用 jQuery 重新排序和动画列表项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8123525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery to re-order and animate list items?
提问by Grim...
So, I've got a list of items, something like:
所以，我有一个项目清单，比如：
<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. An ajax call is being fired periodically, and I may need to re-order the list (by making one of the lower items become the first one in the list). That's easy to do just by changing the HTML of #listHolder, but I would like to animate it so the appropriate item moves up the page to the right place, and the others move down.
等。 ajax 调用被定期触发，我可能需要重新排序列表（通过使较低的项目之一成为列表中的第一个）。只需更改#listHolder 的HTML，就可以轻松做到这一点，但我想为其设置动画，以便适当的项目向上移动页面到正确的位置，而其他项目向下移动。
I've got no idea where to start =/
我不知道从哪里开始=/
NB. It doesn't have to be a list: a div or any other element would be fine.
注意。它不必是一个列表：一个 div 或任何其他元素都可以。
回答by Grim...
Okay, I've done it - it was simpler than I imagined.
好的，我已经做到了 - 它比我想象的要简单。
Note that if you click more than one list object inside of a second, everything goes wrong. You could easily stop this but it won't be an issue for me.
请注意，如果您在一秒钟内单击多个列表对象，则一切都会出错。您可以轻松阻止此操作，但这对我来说不是问题。
$("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);
回答by DefyGravity
Personally, I would grab jQuery UI Sortable functionality and trigger the events on ajax success. take a look at this documentationand let me know if you like the idea. I'll try to find some time between meetings to code up an example if you.
就个人而言，我会抓住 jQuery UI Sortable 功能并在 ajax 成功时触发事件。看看这个文档，如果你喜欢这个想法，请告诉我。如果你愿意，我会尝试在会议之间找一些时间来编写一个例子。
回答by slf
I didn't really like the idea of cloning elements, and I was trying to build a leaderboard visualization, not really wanting to change the DOM, so I did it a different way using data attributes and some basic math.
我真的不喜欢克隆元素的想法，我试图构建一个排行榜可视化，并不是真的想改变 DOM，所以我使用数据属性和一些基本的数学以不同的方式做了它。
html:
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>
style:
风格：
.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; }
(the key thing in the style is position: relative and display: block)
（样式中的关键是位置：相对和显示：块）
javascript:
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 });
}
);
}
});
}
}
