Rubaxa Sortable如何获取项目数组 [英] Rubaxa Sortable how to get array of items

问题描述

我知道这很明显，但我无法理解。

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

我使用Rubaxa / sortable并希望用ajax更新我的数据库添加，删除项目或列表时，将对其进行排序。

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

感谢任何帮助。

推荐答案

我这样解决了：

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]

这篇关于Rubaxa Sortable如何获取项目数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！