php - jQuery - 拖放列表重新排序

Question

我有一个 HTML 列表，我希望用户能够通过拖放操作重新排序，然后将他们的更改提交到数据库。

我对所有数据库方面的东西都很满意，但我在 Javascript/JQuery 方面苦苦挣扎。

我目前有 jQuery UI Sortable工作正常(因此其他元素和通过拖放重新排序的元素)，但我不知道如何获取提交的新订单。

有人可以帮忙吗？如果您需要更多信息，请直接说。谢谢!

Answer 1

例如通过 AJAX 调用将该数据发送到您的应用程序

$('#TabContainer').tabs();
$('#TabContainer .ui-tabs-nav').sortable({
    axis: 'x',
    update: function(event, ui){
        var data = $('#TabContainer .ui-tabs-nav').sortable('serialize');
        $.ajax({
            url: '/events/update-tab-order',
            data: data,
            type: 'POST',
            mode: 'abort'
        });
    }
});

唯一棘手的部分是您必须以 groupname_identifier 的格式在列表项上指定一个 ID。例如:

<div id="TabContainer">
    <ul>
        <li id="MyTabs_123"><a href="#tab0">Tab 1</a></li>
        <li id="MyTabs_124"><a href="#tab1">Tab 2</a></li>
        ...etc
    </ul>
    ...tab content goes here
</div>

然后当您的应用程序接收到 POST 数据时，它将是一个如下所示的数组:

$_POST['MyTabs']

array(
    0 => '123',
    1 => '124'
)