Question

我正在使用sortable来实现一维小部件列表。它工作正常，但当我调用serialize将当前订单发回服务器时，会生成错误的订单。

这是我的HTML，请注意小部件ID的排序：13,10,11：

<div id="widget_columns">
    <ul id="column1" class="widget-column grid_8 alpha ui-sortable">
        <li id="widget_13" class="widget">
        (a widget!)
        </li>

        <li id="widget_10" class="widget">
        (a widget!)
        </li>

        <li id="widget_11" class="widget">
        (a widget!)
        </li>
    </ul>
</div>

列表初始化为

    $(#widget_columns').sortable({
        connectWith: $(#widget_columns'),
        handle: settings.handleSelector,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        revert: 300,
        delay: 100,
        opacity: 0.8,
        containment: 'document',
        start: function (e, ui) {
            $(ui.helper).addClass('dragging');
        },
        stop: function (e, ui) {
            $(ui.item).css({ width: '' }).removeClass('dragging');
            $(settings.columns).sortable('enable');
        }
    });

然而，当我打电话

alert($('#widget_columns *').sortable('serialize'));

找出小部件顺序，我得到正确的ID，但顺序错误，10,11,13：

widget[]=10&widget[]=11&widget[]=13

知道为什么会这样吗？

Answer 1

您正在父div上应用sortable方法而不是ul我不知道为什么，同时在调用serialize时您没有在之前的可排序的对象！

这是一个小的工作 example：

$('#column1').sortable({
    //connectWith: $('#widget_columns'),
    revert: 300,
    delay: 100,
    opacity: 0.8,
    containment: 'document',
    start: function(e, ui) {
        //$(ui.helper).addClass('dragging');
    },
    stop: function(e, ui) {
        //$(ui.item).css({ width: '' }).removeClass('dragging');
        //$(settings.columns).sortable('enable');
        alert($(this).sortable('serialize'))
    }
});

Answer 2

要回答我自己的问题，它与我的解决方案disable每次拖动结束时的可排序这一事实有关，而enable在拖动开始时就是它，这是我不假思索地从中获取的一个概念一些教程。当我删除代码禁用并重新启用sortable（$(settings.columns).sortable('disable');）时，序列化工作正常。

JQueryUI可排序问题：序列化报告错误的顺序

2 个答案: