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

Question

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

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

例如，如果我将它提升 2 行，“第三”将定位在“第一”最初所在的位置，“第一”将定位在高两行。

理想情况下，我想要一个 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');
}

Answer 2

如果您尝试通过手动交互更改列表项的顺序，我认为这jQuery Sortable将是最好的选择。

尝试这个：

http://jqueryui.com/sortable

Answer 3

如果你设置 mainUL有相对位置，你可以使用 jQueryposition方法来获取每个列表项的位置，并相应地调整负边距。

function moveList(itemIndex) {
    var top = 0 - $('#myList li').eq(itemIndex).position().top;
    $('#myList').animate({
        'margin-top': top
    })

}

演示：http: //jsfiddle.net/HcUhC/1/

Demo使用了一个固定高度的父级overflow: hidden，可以改变不同视觉的溢出