jquery - グリッドスターを元の位置に戻す

Question

http://gridster.net/では、すべてのタイルを元の位置に移動するにはどうすればよいですか (ユーザーの変更を元に戻す) ?

Answer 1

グリッドを元の位置にリセットする組み込み関数は見つかりませんでしたが、解決策を見つけました。コンテンツ アイテムとコンテンツ カテゴリの 2 種類のタイルがあります。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;
    });
});