Rubaxa Sortable how to get an array of elements

Question

I know this will be obvious, but I cannot understand.

Im using Rubaxa / sortable and would like to update my DB with ajax when an item is added, deleted or the 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 like this:

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 an array of element keys:

 [2, 3, 1]