jQuery - 拖放列表重新排序答案

【问题标题】：jQuery - Drag and drop List reorderingjQuery - 拖放列表重新排序
【发布时间】：2012-05-31 00:36:47
【问题描述】：

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

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

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

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

【问题讨论】：

看看serialize()插件的serialize()方法。

标签： php jquery html jquery-ui sorting

【解决方案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'
)

【讨论】：

【解决方案2】：

看看@serialize()，我做了同样的事情，没有显式提交按钮，而是使用mootools直接通过ajax注入订单。

<script language="javascript">
            <!--
            window.addEvent('domready', function() {
                var thisSortables = new Sortables($('list'), {
                    constrain: true,
                    clone: true,
                    revert: true,
                    onStart: function() {
                        $('confirm').set('html', '');
                    },
                    onComplete: function() {
                        this.serialize(function(el, index) {
                            var updateOrderRequest = new Request.HTML({
                                url: '../module/tools/admgn/dbsorter.php',
                                method: 'post',
                                data: {'itemID': el.id.replace("item_",""), 'new_pos':(index+1)}
                            }).send();
                        });
                        $('confirm').set('html', 'Reihenfolge erfolgreich gespeichert.');
                    }
                });
            });
            -->
        </script>

也许你知道如何让它发挥作用。

【讨论】：

【解决方案3】：

由于<UL>和<OL>不是表单元素，你无法通过post方法，希望你可以这样做

http://quasipartikel.at/multiselect_next/

选择所有选项并将可用部分隐藏

【讨论】：