jquery jquery-ui sortable array

Can someone please help me with this one:

I am reposting this just in case people have missed it and or to see if UI Sortables is something beyond most people - so I apologise in advance: After considerable research on the BigG, posting here there and everywhere I am still no nearer finding or getting an answer or even seeing something I can understand. OK I admit I am quite at home with php, css, html etc but js/Jquery ummmm that is all new to me -. so I am always looking for things/explanations that I can understand. Sadly for JQuery it seems that 99% of the tutorials etc. out there are written in a way that I cannot understand. Based on on posts in other forums etc I know I am not alone we are looking for a "dummies" Please do not say look at "help" items like http://jqueryui.com/demos/sortable/#event-update - http://jqueryui.com/demos/sortable/#method-toArray - http://jqueryui.com/demos/sortable/#method-serialize as they are not help items to people like me. As I have said in other posts they are "martian".

Wh开发者_JAVA百科en using UISortables where - and how do I put "serialize" into the JQuery function?

I have 4 columns class '.columm' and each with a unique id - col1,col2,col3 & col4 -like this.

<div class="column" id="col1(to col4)">

Feeds Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Feeds Lorem ipsum dolor sit amet, consectetuer adipiscing elit

I can get the drag & drop bit to work I now need to put the "final" positions into a serialized array.

Here is my code:

$(".column").sortable({
        revert: true,
        scroll: true,
        appendTo: 'body',
        connectWith: '.column',
        delay:200,
        stop: function() {
        $(".column").each(function(){
        var test = $(this).attr('id');

    alert(test);

    //
        //var myArray = $(this).sortable("serialize");

        })
    },
    revertDuration:50000,
    scope:'scope',
    opacity: 0.80,
});

You will see alert test. I have done this to see if I can get the col id's into an alert and I can, but where do i put

.sortable( "serialize" , [options] ) and how do I do that for the 4 columns to create 1 single serialized array?

having done that how/where do you set the order when you next load the page? (OK yes, I do intent to "store" the serialized array)

Help please - thanks

I'm guessing you want to grab the serialized string when the sorting has stopped? Or maybe add a button to submit?

I posted a demo, and tried to cover both of those ways to do it, I hope it helps:

$(function() {
    $("#sortable").sortable({
        revert: true,
        scroll: true,
        appendTo: 'body',
        connectWith: '.column',
        delay:200,
        stop: function(){ $(':button').trigger('click') },
        revertDuration:50000,
        scope:'scope',
        opacity: 0.80,
    });

    $(':button').click(function(){
        var string = $("#sortable").sortable("serialize");
        alert( string);
    })

});

The answer above will not work! At least, I have not been able to get that method to work correctly with multiple columns. It does work great for just one list like in the demo fudgey linked to above.

For the reference of future users, you will need to do something like this in order to achieve the desired effect:

$( ".column" ).sortable({ 
    connectWith: '.column',
    update: function(event, ui){ 

        var out = "";

        $('.column').each(function(index){
            out += '{';
            out += $(this).attr('id') + ':';
            $("div", this).each(function(index){
                out += '{';
                out += $(this).attr('id') + ':';            
                out += '}';
            });
            out += '}';
        });

        alert(out);

    } 
});

This will output something that can then be parsed server-side like this:

{column_1:{wid_1:}{wid_4:}{wid_5:}{wid_2:}{wid_3:}}{column_2:{wid_6:}{wid_7:}{wid_8:}{wid_9:}}{column_3:{wid_11:}{wid_10:}{wid_12:}}

$('#ul').sortable({
                        opacity: 0.5,
                        items: '> li',
                        update: function(event, ui) {
                            var new_order = $(this).sortable('toArray');

                            var o = { 
                                ids: {} 
                            };
                            for (i = 0; i < new_order.length; i++) {
                                if (new_order[i] !== undefined) {
                                    o.ids[i] = new_order[i];
                                }
                            }

                            console.log(o);
                        }
                    });