Question

我使用RubaXa优秀的Sortable JS库，允许在基于Bootstrap的仪表板上拖放重新排列div。由于div都在2列（左和右）中，因此我使用＆＃34; leftColumn＆＃34;的ID来定义列。和＆＃34; rightColumn＆＃34;。

为了允许在列之间拖动，我设置了两个具有相同组的sortable，如下所示：

Sortable.create(leftColumn, {
    group: 'dash_sections',
});
Sortable.create(rightColumn, {
    group: 'dash_sections',
});

现在我正在尝试从两个列表（整个组）加载并保存订单。我在每个div标记中放置了data-id个字段，并且我尝试使用以下代码来保存和恢复所有内容的顺序。

Sortable.create(rightColumn, {
    group: 'dash_sections',
    store: {
        get: function (sortable) {
            var order = localStorage.getItem(sortable.options.group);
            return order ? order.split('|') : [];
        },

        set: function (sortable) {
            var order = sortable.toArray();
            localStorage.setItem(sortable.options.group, order.join('|'));
        }
    }
});

但是，我只保存和恢复该列的订单，而不是整个组。我最终希望将组的顺序存储在数据库中的单个字符串中。如何保存和恢复整个群组的订单？

更新我在sortable.create函数中使用类似的代码，使用＆＃34; leftcol＆＃34;和＆＃34; rightcol＆＃34;而不是sortable.options.group。只要您不在列之间拖动，这就可以正确保存每个可排序的顺序。即使在列之间拖动，我仍然在寻找保存订单的方法。

Answer 1

以下是我实现类似功能的方法

为可排序选项引入了category标记：

var leftColumnOptions = {
    group: "dash_sections",
    category: "left_column",
    store: setupStore()
};

var rightColumnOptions = {
    group: "dash_sections",
    category: "right_column",
    store: setupStore()
}

setupStore功能检查localStorage可用性并应用get和set

function setupStore() {
    if (localStorageAvailable) { // basic localStorage check: (typeof (localStorage) !== "undefined")
        return {
            get: getValue,
            set: setValue
        };
    }
    return {}; 
}

getValue和setValue根据上述选项中定义的类别名称检索和存储商品ID

function getValue(sortable) {
    var order = localStorage.getItem(sortable.options.category);
    return order ? order.split('|') : [];       
}

function setValue(sortable) {
    var order = sortable.toArray();
    localStorage.setItem(sortable.options.category, order.join('|'));
}

在初始化Sortable之前检查localStorage中存储的订单信息是个好主意，为方便起见我使用lodash

function applyState($section, categoryName) {
    if (localStorageAvailable) {
        var order = localStorage.getItem(categoryName);
        var itemIds = order ? order.split('|') : [];
        var $items = _.map(itemIds, function(itemId, index) {
            return $("[data-id='" + itemId + "'");
        });
        $section.append($items);
    }
}

用法是：

applyState($(".js-left-column"), "left_column");
applyState($(".js-right-column"), "right_column");
// initialize sortable

整个代码：

HTML：

<div class="js-two-column-sortable js-left-column" data-category="left_column">
    <!-- elements -->
</div>
<div class="js-two-column-sortable js-right-column" data-category="right_column">
    <!-- elements -->
</div>

JS：

var localStorageAvailable = (typeof localStorage !== "undefined");

function getValue(sortable) {
    var order = localStorage.getItem(sortable.options.category);
    return order ? order.split('|') : [];       
}

function setValue(sortable) {
    var order = sortable.toArray();
    localStorage.setItem(sortable.options.category, order.join('|'));
}

function setupStore() {
    if (localStorageAvailable) {
        return {
            get: getValue,
            set: setValue
        };
    }
    return {}; 
}

function onAdd(evt) {
    setValue(this);
}

function applyState($section, categoryName) {
    if (localStorageAvailable) {
        var order = localStorage.getItem(categoryName);
        var itemIds = order ? order.split('|') : [];
        var $items = _.map(itemIds, function(itemId, index) {
            return $("[data-id='" + itemId + "'");
        });
        $section.append($items);
    }
}

var options = {
    group: "two-column-sortable",
    store: setupStore(),
    onAdd: onAdd
};

function init() {

    $(".js-two-column-sortable").each(function(index, section) {
        var $section = $(section);
        var category = $section.attr("data-category");
        var sortableOptions = _.extend({}, options, { category: category });
        applyState($section, category);
        $section.data("twoColumnSortable", new Sortable(section, sortableOptions));
    });
}

init();

保存并恢复两个列表

1 个答案: