Rubaxa Sortable how to get array of items

Question

I know this is going to be obvious, but I can't figure it out.

Im using Rubaxa/sortable and would like to update my DB with ajax when an item is added, removed or list is sorted.

    var editableList = Sortable.create(document.getElementById('editable'), {
    animation: 150,
    filter: '.js-remove',
    onFilter: function (evt) {
        evt.item.parentNode.removeChild(evt.item);
    },
    onSort: function(evt) {
        console.log(editableList.toArray()); // not working

    }
});

document.getElementById('addUser').onclick = function () {
    Ply.dialog('prompt', {
        title: 'Add',
        form: { name: 'name' }
    }).done(function (ui) {
        var el = document.createElement('li');
        el.innerHTML = ui.data.name + '<i class="js-remove">✖</i>';
        editableList.el.appendChild(el);
    });
};

Any help is appreciated.

Answer 1

I solved it this way:

HTML:

<ul id="products">
    <li data-key="1"></li>
    <li data-key="2"></li>
    <li data-key="3"></li>
</ul>

JS:

var element = $('#products')[0];
var sortable = new Sortable(element, {
    handle: '.drag-handle',
    ghostClass: 'drag-ghost',
    onSort: function (e) {
        var items = e.to.children;
        var result = [];
        for (var i = 0; i < items.length; i++) {
            result.push($(items[i]).data('key'));
        }
        console.log(result);
        /* Do ajax call here */
    }
});

After sorting you will get the array of the items keys:

[2, 3, 1]