在jquery可排序的连接列表中保存顺序

Question

我的代码运行良好。。但我喜欢在做出任何更改后立即将顺序保存在第二列的Mysql中。。。我能做的PHP编程，只是不知道如何将更改发送到PHP文件

请参阅我的代码(完整代码位于：http://jsfiddle.net/helpinspireme/wMnsa/(

<ul id="unassigned_list" class="connected_sortable">
<li class="ui-state-default"><div class="draggable_area">Item 1</div><div class="click_area">&#8594;</div><div class="cl"></div></li>
<li class="ui-state-default"><div class="draggable_area">Item 2</div><div class="click_area">&#8594;</div><div class="cl"></div></li>
</ul>
<ul id="recipients_list" class="connected_sortable">
<li class="ui-state-highlight"><div class="draggable_area">Item 3</div><div class="click_area">&#8592;</div><div class="cl"></div></li>
<li class="ui-state-highlight"><div class="draggable_area">Item 4</div><div class="click_area">&#8592;</div><div class="cl"></div></li>
</ul>
<script>
$("#unassigned_list, #recipients_list").sortable({
connectWith: ".connected_sortable",
items: "li",
handle: ".draggable_area",
stop: function(event, ui) {
updateLi(ui.item);
}
}).disableSelection().on("click", ".click_area", function() {
// First figure out which list the clicked element is NOT in...
var otherUL = $("#unassigned_list, #recipients_list").not($(this).closest("ul"));
var li = $(this).closest("li");
// Move the li to the other list. prependTo() can also be used instead of appendTo().
li.detach().appendTo(otherUL);
// Finally, switch the class on the li, and change the arrow's direction.
updateLi(li);
});
function updateLi(li) {
var clickArea = li.find(".click_area");
if (li.closest("ul").is("#recipients_list")) {
li.removeClass("ui-state-default").addClass("ui-state-highlight");
clickArea.html('&#8592;');
} else {
li.removeClass("ui-state-highlight").addClass("ui-state-default");
clickArea.html('&#8594;');
}    
}
</script>

Answer 1

您可以将id添加到元素中，并将下面的代码添加到sortable:中

update: function() {
var order = $(this).sortable('toArray');
alert(order);
}

在线演示(jsFiddle(