使用jQuery向上或向下移動列表的位置

我有一個簡單的列表，它將包含1行或更多行。使用jQuery向上或向下移動列表的位置

我有一個JavaScript變量，它表示應該引發整個列表的行數。請注意，我不想在列表中交換行。例如，如果我提出了2行，「third」將被放置在「最初」的位置，而「first」位於兩個更高的位置。

理想情況下，我想要一個jQuery解決方案，而不是原生JavaScript解決方案。由於

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

來源

2012-10-30 user1032531

過流看一看：http://api.jquery.com/index /和http://api.jquery.com/insertAfter/ – m90

通過*提高列表*，你的意思是移動列表本身（即改變位置本身）或改變列表項的索引？ – techfoobar

@ m90。 insertAfter插入元素（即UL中的LI）。我希望將整個UL元素移動一個等於LI元素高度N倍的距離。 – user1032531

入住這演示：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'); 
}

來源

2012-10-30 14:04:46 techfoobar

啊，完美的techfoobar！我真的很難溝通我想要做的事情。感謝你對我的支持。 – user1032531

我的榮幸。很高興幫助。 :-) – techfoobar

我不想讓它動起來，但立即在想要的位置。我只是將「快」改爲0，而且似乎可行。 – user1032531

如果你試圖改變由手動交互列表項的順序，我覺得將是最好的選擇。

試試這個：

http://jqueryui.com/sortable

來源

2012-10-30 13:49:58 Xmindz

謝謝Xmindz。很酷的功能，但不是我在找的東西。希望保持訂單不變，但將整個列表向上移動。 – user1032531

如果位置相對具有主UL設置，你可以使用jQuery position方法來獲取發現每個列表項的毒藥，和accordinglly調整緣陰性。

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

}

DEMO：http://jsfiddle.net/HcUhC/1/

演示使用帶有overflow: hidden固定高度的父，可以更改不同的視覺

來源

2012-10-30 14:11:04 charlietfl

謝謝charlietfl，我會研究。任何贊成或反對techfoobar的解決方案？ – user1032531

我的版本不依賴於所有項目是相同的高度。它從物品相對於「UL」的實際位置開始工作。也不需要絕對定位 – charlietfl

使用jQuery向上或向下移動列表的位置

回答

相關問題