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

Question

I'm using sortable to implement a one-dimensional list of widgets. It's working alright, but when I call serialize to send the current order back to the server, the wrong order is generated.

Here's my HTML, note the ordering of widget IDs: 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>

The list is initialized with

    $(#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');
        }
    });

However, when I then call

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

to find out the widget order, I get the correct IDs, but in the wrong order, 10, 11, 13:

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

Any idea why this might be?

Answer 1

You are applying the sortable method on the parent div and not the ul I'm not sure why, also when calling serialize you are not calling it on the previous sortable object!

Here is a small working 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

To answer my own question, it has something to do with the fact that my solution disable s the sortable whenever dragging ends, and enable s it when dragging starts, a concept I unthinkingly took from some tutorial. When I removed the code disabling and re-enabling the sortable ( $(settings.columns).sortable('disable'); ), the serialization worked fine.