jqueryを使用してリスト要素の順序を変更する方法を教えてください。

Question

jquery sortableを使用しています。

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

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

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

元のリスト：ここ

ITEM1 ITEM2 ITEM3 ITEM4 item5

サブミット。

変更されたリスト：私は例えばitem3の下にitem2を移動しました。ここ

ITEM1 ITEM3 ITEM2 * ITEM4 item5

サブミット。

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

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

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

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

Answer 1

あなたがしたいことは、アイテムの順序付きリストを持っていると思います（1アイテム、2アイテム、3アイテム3）。そして、1アイテムが移動されたら、リストの番号を付け直しますか？したがって、2が3より下に移動した場合、テキストは1のようになります。Item 1、2. Item 3、3. Item 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年代を使ってテキストを更新しますリストの番号が変更されます。これは、ユーザーがアイテムを移動してマウスを離すたびに、ソート可能なイベント（this pageのイベントタブの詳細）を使用してstopイベントを使用して行います。

Answer 2

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

$(function() { 
    $("#sortableList").sortable({ 
    update: function(event, ui) { 
     // Update ui.item to your requirement 
    } 
    }); 
});