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