Skip to content

Storing order + resetting to that order #1765

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
misterHippo opened this issue Mar 9, 2020 · 3 comments
Closed

Storing order + resetting to that order #1765

misterHippo opened this issue Mar 9, 2020 · 3 comments

Comments

@misterHippo
Copy link

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
Copy link
Member

owen-m1 commented Mar 14, 2020

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.

@owen-m1 owen-m1 closed this as completed Mar 14, 2020
@misterHippo
Copy link
Author

misterHippo commented Mar 17, 2020

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

Move 'Stuff' to 'About':
image

Then run the resetSortable()
image

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
Copy link
Author

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. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants