2

私は2つのリストを持っています

<ul class="sortable" id="list-A">
   <li id="1">Value 1 </li>
   <li id="2">Value 2 </li>
   <li id="3">Value 3 </li>
</ul>

<ul class="sortable" id="list-B">
   <li id="4">Value 1 </li>
   <li id="5">Value 2 </li>
   <li id="6">Value 3 </li>
</ul>

このようにつながっています

     $( ".sortable" ).sortable({
       connectWith: '.sortable',
       placeholder: "widget-highlight"
     });

順序を保存して 1 つの順序付きリストをデータベースに保存する方法は知っていましたが、ユーザーがアイテムをリスト a からリスト b に移動した場合に保存する方法はありますか?

アイテムの位置を保存したいのですがどうすればいいですか

4

1 に答える 1

5

.sortable()のコールバックを使用し.receive()て、ドロップされたノード.index()を 経由で取得しますui.item.index()。PHP での処理方法は、ajax ハンドラーのセットアップ方法によって異なります。

$( ".sortable" ).sortable({
   connectWith: '.sortable',
   placeholder: "widget-highlight",
   // Receive callback
   receive: function(event, ui) {
     // The position where the new item was dropped
     var newIndex = ui.item.index();
     // Do some ajax action...
     $.post('someurl.php', {newPosition: newIndex}, function(returnVal) {
        // Stuff to do on AJAX post success
     });
   },
   // Likewise, use the .remove event to *delete* the item from its origin list
   remove: function(event, ui) {
     var oldIndex = ui.item.index();
     $.post('someurl.php', {deletedPosition: oldIndex}, function(returnVal) {
        // Stuff to do on AJAX post success
     });

   }
 });

上記の例では、ドロップされたノードの新しいリスト位置が送信されます$_POST['newPosition']

イベントは.sortable()API ドキュメントで完全に説明されています

于 2012-11-23T02:11:11.693 に答える