Storing order + resetting to that order

[misterHippo]

G'day,

I have SortableJS working, and it's very good. I like it. :)

I have nested divs set up to show a page structure. My intent is to be able to reset the view back to it's original state. The form's button[type=reset] does the form, but a function to pull the order of the pages back to their initial state is what I'm missing. (I'm hoping I don't have to save the HTML, destroy the SortableJS instance, and reinstantiate.)

I have included store:{get:function(){}, set:function(){}} but I'm unclear on how to get back to a specific point in time. Assuming I collect one of the arrays ["51w","43s","4fv"], how to I pump that back into the object? Or have I misunderstood the objective of this?

Any help would be appreciated.

[owen-m1]

You call sortable.sort(array) with the array you got from sortable.toArray(). And you call sortable.toArray() at the specific point in time where you want to save the instance. So you don't need store in this case.

[misterHippo]

Hi again, So I've had ... some success.

This is the code I'm using for the instantiation...

var los=[];
function setupNestedSortable(){
    var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
    // Loop through each nested sortable element
    for (var i = 0; i < nestedSortables.length; i++) {
        los[i]={'sortable':new Sortable(nestedSortables[i], {
                group: 'nested',
                filter: '.unsortable',
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65,
                onEnd: function(){
                    getCurrentPagesOrder();
                },
                store:{
                    get: function (sortable) {
                        getCurrentPagesOrder();
                        var order = localStorage.getItem(sortable.options.group);
                        //console.log(order);
                        return order ? order.split('|') : [];
                    },
                    set: function (sortable) {
                        var order = sortable.toArray();
                        localStorage.setItem(sortable.options.group.name, order.join('|'));
                        //console.log(order);
                    }
                }
            }),
            'arr':'Yo Momma'
        };
    }
    for (var i = 0; i < los.length; i++) {
        //console.log(los[i]['sortable'].toArray());
        los[i]['arr']=los[i]['sortable'].toArray();
        //console.log(los[i]['arr']);
    }
}

Then I reset like this

function resetSortable(){
    for(var i = 0; i < los.length; i++){
        if(los[i]['arr']!=''){
            los[i]['sortable'].sort(los[i]['arr']);
        }
    }
}

You can see that the sortable object is being stored in los[] along with the current order as an array.

What I'm seeing is that while the changes in the nested structure are kept to the same section (ie: same depth, same parent) - resetSortable() works & puts them back.

However, when I move something to another parent, strange things happen. For example: Starting Point:

Move 'Stuff' to 'About':

Then run the resetSortable()

Any thoughts as to a solution? (& Am I correct in assuming that the codes (ie: 43s) are the unique ID for a sortable child?)

Ps. I do have one solution that would work, but it means dumping the HTML in that section and reloading, then re instantiating the sortable objects again. If I went down this path, would I need to destroy the sortable objects, or just set the los[] sorted value to null?

[misterHippo]

I know you haven't had a chance to reply, but I went with the idea of storing the initial HTML, then using the destroy() function I found in the code, and reinitialising.

Thanks for your help. What you wrote above was great to another single level ordering I did. :)