Rubaxa Sortable如何获得项目数组

Question

我知道这将是显而易见的，但我无法弄清楚。

即时通讯使用Rubaxa /可排序，并希望更新我的数据库与ajax时，项目被添加，删除或列表排序。

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); 
    }); 
}; 

任何帮助表示赞赏。

Answer 1

我解决这样说：

HTML：

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

JS：

[2, 3, 1] 

：

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 */ 
    } 
}); 

排序，你会得到的物品键阵列后