web-dev-qa-db-ja.com

jQueryソート可能上下移動ボタン

現在、jQueryの並べ替え可能なリストが完全に機能しています。 'li'要素を移動できます。ただし、特定の「li」要素を1つ上に移動し、上の1つを下に移動するボタンを作成するにはどうすればよいですか（もちろん、下ボタンの場合はその逆です）。私はグーグルを見回して、ほとんど見つけませんでした。リンクさえ素晴らしいでしょう！

ありがとう！

jqueryjquery-ui-sortable
24
bobby

次のHTMLコードがある場合：

<button id="myButtonUp">myButtonTextForUp</button>
<button id="myButtonDown">myButtonTextForDown</button>
<ul>
  <li>line_1</li>
  <li>line_2</li>
  <li>line_3</li>
</ul>

各lisをマークする何かがすでにあると仮定します。したがって、マークされたliはクラスmarkedLiを持っていると仮定します。次のコードは、理論的にはその要素を上下に移動する必要があります（コース外ではまったくテストされていません）。

$('#myButtonUp').click(function(){
  var current = $('.markedLi');
  current.prev().before(current);
});
$('#myButtonDown').click(function(){
  var current = $('.markedLi');
  current.next().after(current);
});
68
azatoth

アザトースの答えはうまくいきますが、ボビーは私と同じようにアニメーションを探しているのかもしれません。そこで、動きをアニメーション化するために次のコードを作成しました。

function moveUp(item) {
    var prev = item.prev();
    if (prev.length == 0)
        return;
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
        prev.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertBefore(prev);
    });
}
function moveDown(item) {
    var next = item.next();
    if (next.length == 0)
        return;
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
        next.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertAfter(next);
    });
}

ここで見ることができます http://jsfiddle.net/maziar/P2XDc/

40
Maziar Taheri

@azatothの回答に基づいて、すべてのレコードにボタンが必要な場合は、この方法で実行できます（liタグをSortableタグに置き換えます）。

HTML：

<button class="my-button-up">Up</button>
<button class="my-button-down">Down</button>

jQuery：

$('.my-button-up').click(function(){
    var current = $(this).closest('li');
    current.prev().before(current);
});
$('.my-button-down').click(function(){
    var current = $(this).closest('li');
    current.next().after(current);
});
4
Roy Shoa