jquery - 将 Gridster 重置为原始位置

Question

使用http://gridster.net/，如何将所有图块移动到其原始位置（撤消用户更改）？

Answer 1

我没有找到将网格重置为原始位置的内置函数，但我找到了解决方案。我们有两种类型的图块 - 内容项和内容类别。我们使用data-content-item-id和data-content-category-id属性来定义它们的唯一id（你也可以使用id属性）。

$(document).ready(function() {
    var gridster;

    function create_gridster() {
        gridster = $(".gridster div.gridster-container").gridster({
            widget_selector: ".gridster div.gridster-container div.thumbnail",
            widget_margins: [5, 5],
            widget_base_dimensions: [103, 70],
            min_cols: 6,
            max_cols: 6,
            min_rows: 4,
            serialize_params: function($w, wgd) {
                if ($w.hasClass("content-item")) {
                    return {
                        type: "content_item",
                        tile_id: parseInt($w.attr("data-content-item-id")),
                        col: wgd.col,
                        row: wgd.row,
                        size_x: wgd.size_x,
                        size_y: wgd.size_y
                    };
                } else if ($w.hasClass("content-category")) {
                    return {
                        type: "content_category",
                        tile_id: parseInt($w.attr("data-content-category-id")),
                        col: wgd.col,
                        row: wgd.row,
                        size_x: wgd.size_x,
                        size_y: wgd.size_y
                    };
                }
            }
        }).data('gridster');
    }

    create_gridster();
    var original_grid_data = gridster.serialize();

    $("a.reset-preview-locations").click(function() {
        if (!confirm("Are you sure you want to reset your changes and use saved locations?")) {
            return false;
        }
        for (var i = 0; i < original_grid_data.length; i++) {
            switch (original_grid_data[i].type) {
                case "content_item":
                    var thumbnail_element = $(".gridster div.gridster-container div.content-item.thumbnail[data-content-item-id='" + original_grid_data[i].tile_id.toString() + "']");
                    thumbnail_element.attr("data-row", original_grid_data[i].row.toString());
                    thumbnail_element.attr("data-col", original_grid_data[i].col.toString());
                    break;

                case "content_category":
                    var thumbnail_element = $(".gridster div.gridster-container div.content-category.thumbnail[data-content-category-id='" + original_grid_data[i].tile_id.toString() + "']");
                    thumbnail_element.attr("data-row", original_grid_data[i].row.toString());
                    thumbnail_element.attr("data-col", original_grid_data[i].col.toString());
                    break;

            }
        }
        gridster.destroy(false);
        create_gridster();
        return false;
    });
});