jquery jquery-ui sortable array

Question

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".

When 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

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

Not an answer I know - but I reccommend that you install the jQueryify plugin for Firebug and also use console.log(whatever) instead of alert - these two things really helped me when I was learing / am debugging jQuery. You can also type jQuery directly into the console in Firebug to execute it. — calumbrodie
– calumbrodie, Commented May 24, 2010 at 13:46

Mottie · Accepted Answer · 2010-05-12 20:26:16Z

1

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

});

answered May 12, 2010 at 20:26

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

delta9 · Accepted Answer · 2012-01-09 23:56:03Z

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:}}

baro · Accepted Answer · 2012-11-08 00:17:29Z

0

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

answered Nov 8, 2012 at 0:17

baro

216 bronze badges

Collectives™ on Stack Overflow

jquery jquery-ui sortable array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related