0

1つ以上の行で構成される単純なリストがあります。

リスト全体を上げる必要がある行数を表すJavaScript変数があります。リスト内の行を入れ替えるつもりはないことに注意してください。

たとえば、2行上げると、「3番目」は「最初」が元々あった場所に配置され、「最初」は2行上に配置されます。

理想的には、ネイティブJavaScriptソリューションではなくjQueryソリューションが必要です。ありがとう

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

3 に答える 3

2

このデモを確認してください：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-30T14:04:46.670 に答える
0

jQuery Sortable手動でリストアイテムの順序を変更しようとしている場合は、が最適なオプションだと思います。

これを試して：

http://jqueryui.com/sortable

于 2012-10-30T13:49:58.997 に答える
0

メインのUL相対位置を設定すると、jQuerypositionメソッドを使用して各リストアイテムの位置を検索し、それに応じて負のマージンを調整できます。

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

}

デモ：http：//jsfiddle.net/HcUhC/1/

デモでは、固定の高さの親を使用し、overflow: hiddenさまざまなビジュアルのオーバーフローを変更できます

于 2012-10-30T14:11:04.417 に答える