Saving positions via ajax

[sanch941]

Hi everyone. I cant find documentation of ajax . I need to save positions via ajax. How can i get array that contains all swappable items ?

[brianabaker]

I also want to know this.

[carlesjove]

New position can be found at event.newIndex, so you should just make an Ajax request to save this within the sortable:stop callback. Just take into account that index is 0 based, in case you need it to start at 1.

sortable.on('sortable:stop', (event) => {
  console.log(event.newIndex);
  // Ajax request here
}

[bee-interactive]

Hi!

Is it possible to get the full array of the new index? For example, if I have ten list elements and I change one element, all positions for the other items could be changed depending on the new position. I cannot just update one item in the database, I need to update the full list.

[carlesjove]

@bee-interactive There's not such functionality that I'm aware of, so you should probably handle this with event.newContainer by removing the 2 duplicated elements the action creates, which should have class draggable--original and draggable-mirror by default.

sortable.on('sortable:stop', (event) => {
  console.log(event.newContainer);
}

I guess it'd be nice to have a method that does exactly this…

[bee-interactive]

@carlesjove Yep that's too bad. This functionnality could be really helpful for this situation. Getting the event.newContainer could be a way around to achieve this but.. it's just a way around..

[higorch]

function sortable() {

    var sortable = new Sortable('ul', {
        draggable: 'li',
    });

    sortable.on('sortable:stop', (event) => {
        var objs = [];
    
        var childrens = event.newContainer.querySelectorAll('a:not(.draggable--original):not(.draggable-mirror)');
    
        childrens.forEach((child, index) => {
            var uuid = child.getAttribute('data-uuid');
            var obj = {sort: index + 1, uuid: uuid};
            objs.push(obj);
        });
        
        // implementation save ajax...
    });

}