jquery ui sortable save connectWith list to mysql database php

Question

我有两个清单

<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"
     });

我知道如何通过保存订单将一个有序列表保存到数据库,但如果用户将项目从列表a移动到列表b,如何保存？

我想保存项目位置,但如何

Answer 1

使用.sortable()'s .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']

这些事件在API文档中有完整描述.sortable()