jquery - 使用 jQuery 上下移动列表的位置

Question

我有一个简单的列表，其中包含 1 行或多行。

我有一个 JavaScript 变量，它代表整个列表应该出现的行数。请注意，我不希望交换列表中的行。

例如，如果我将它提高 2 行，“third”将位于“first”原来的位置，而“first”将位于高两行。

理想情况下，我想要一个 jQuery 解决方案而不是原生 JavaScript 解决方案。谢谢

<ul id="myList">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
</ul>

Answer 1

查看此演示:http://jsfiddle.net/n6UhP/1/

这假设您的列表是绝对定位的。

var liHeight = $('#myList li:first').height(); 

function moveUpBy(_numLIs) {
    $('#myList').animate({
        top: ($('#myList').offset().top - _numLIs * liHeight) + 'px'
    }, 'fast');
}

function moveDownBy(_numLIs) {
    $('#myList').animate({
        top: ($('#myList').offset().top + (_numLIs + 1) * liHeight) + 'px'
    }, 'fast');
}