[英]Rubaxa Sortable how to get array of items
我知道这很明显,但我无法弄清楚。
我正在使用Rubaxa / sortable,并希望在添加,删除项目或列表排序时使用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);
});
};
任何帮助表示赞赏。
我这样解决了:
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 */
}
});
排序后,您将获得项目键的数组:
[2, 3, 1]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.