jquery ui sortable save connectWith list to mysql database php

时间:2012-11-23 01:47:58

标签: php mysql ajax jquery-ui

我有两个列表

<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

,如何保存

我想保存项目位置,但是

1 个答案:

答案 0 :(得分:5)

使用.sortable()的{​​{1}}回调,通过.receive()获取已删除节点的.index()。如何在PHP中处理它取决于你的ajax处理程序的设置方式。

ui.item.index()

以上示例将在$( ".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 }); } });

中发送已删除节点的新列表位置

事件在.sortable() API documentation

中有详细描述