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