將Gridster重置爲原始位置

Question

使用http://gridster.net/，如何將所有的tile移動到其原始位置（撤消用戶更改）？

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