2

私はjquerysortableを使用しています。

今、私はすでにドラッグアンドドロップを使用できるアイテムのリストを持っています。かっこいいです。

リストの下部にある送信ボタンを使用して、新しい注文を送信します。リストの変更は自動的に送信されません。

必要なのは、要素の位置が変更されたことを何らかの形で示すことだけです。私はかなりググった。答えはありません。

元のリスト：

item1 item2 item3 item4 item5

ここに送信ボタン。

変更されたリスト：たとえば、アイテム2をアイテム3の下に移動しました。

item1 item3 item2 * item4 item5

ここに送信ボタン。

jqueryでsortableを使用してアイテム2に記号を表示するにはどうすればよいですか？

私はソート可能な変更イベントであるべきだと思いますが、私はjqueryの初心者なので、それを使用する方法がまだわかりません。

http://docs.jquery.com/UI/Sortable#event-change

ありがとうございました。

4

2 に答える 2

1

あなたがやりたいことは、アイテムの順序付けられたリスト (1. アイテム 1、2. アイテム 2、3. アイテム 3) があり、1 つのアイテムが移動されたときにリストの番号を付け直すことだと思いますよね? したがって、2 を 3 より下に移動した場合、テキストは 1. 項目 1、2. 項目 3、3. 項目 2 のようになります。これが正しければ、コードは次のようになります。まず、HTML を次のようにする必要があります。

<ul id="yourSortableListID">
   <li class="renumberMe"><span class="list_num"></span> Item 1</li>
   <li class="renumberMe"><span class="list_num"></span> Item 2</li>
   <li class="renumberMe"><span class="list_num"></span> Item 3</li>
</ul>

JavaScript は次のようになります。

function renumberListItems() {
    i = 1;
    $(".renumberMe").each( function() {
        $(".list_num", this).text(i + ".");
        i++;
    });
}

// we don't want to add the sortable until the dom is ready
$(document).ready(function() {
    renumberListItems();
    $("#yourSortableListID").sortable({
        stop: function(event, ui) {renumberListItems();}
    });
});

renumberListItems() は、各 li 項目を調べ、その中の list_num 項目を見つけ、iの値を使用してテキストを更新し、リストの番号が付け直されるようにします。これは、ユーザーがアイテムを移動してマウスを離すたびに、指定した関数を呼び出すsortables で提供されるイベント (このページstopの [イベント] タブで詳細を参照) を使用して行います。

于 2009-08-27T08:47:08.577 に答える
1

updateのイベントにコールバックを提供し、sortableそのコールバック内でui.item、ドラッグされた要素にアクセスすることができます。例えば：

$(function() {
  $("#sortableList").sortable({
    update: function(event, ui) {
      // Update ui.item to your requirement
    }
  });
});
于 2009-08-27T08:59:06.570 に答える