javascript - Rubaxa Sortable 如何获取项目数组

Question

我知道这很明显，但我想不通。

我正在使用 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);
    });
};

感谢任何帮助。

Answer 1

我是这样解决的:

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]