让我说我有以下无序列表
<ul> <li><a>Hank</a></li> <li><a>Alice</a></li> <li><a>Tom</a></li> <li><a>Ashlee</a></li> </ul>
什么im寻找是当我点击汤姆，它移动(动画，没有拖动)到列表的顶部(索引0)。
我认为jquery可排序，但我无法找到一种以编程方式激活移动部件的方法。
解决方法
我想出了一个似乎工作得很好的解决方案。这是一个概念的证明，所以你可能需要修改它，以便为你的具体情况更好地工作。另外，我只是在Firefox中测试过，但是我没有看到任何理由，所以在所有浏览器中都不行。无论如何，这里是：
<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>
它计算点击的LI和第一个LI之间的偏移量差异，并通过将点击的位置设置为相对位置并使顶部属性动画化，将点击的位置移动到顶部。类似地，它计算点击的LI留下多少空间，并相应地移动所有先前的空格。当完成动画后，它重新排列DOM以匹配新的顺序并恢复定位样式。
希望有帮助！
