將訂單保存在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）