search

ducksboard / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://gridster.net/
MIT License
6.03k stars 1.2k forks source link

Possible to put a grid inside a grid? #182

Closed sandwichsudo closed 11 years ago

sandwichsudo commented 11 years ago

I'm creating a web page of JQuery plug-ins each of which is a cell in a grid. I'm then trying to put a grid on one of these cells, but the data attributes of the grid (cell width/height) get overwritten in the second initialization call: $(".gridster ul.sandboxGridList").gridster({

    widget_margins: [10, 10],
    widget_base_dimensions: [40, 40]
});

   $(".gridster ul.pluginGridList").gridster({
   widget_margins: [10, 10],
   widget_base_dimensions: [360, 388]
});

Is this possible to do and I'm doing it wrong? Cheers, Zim

sandwichsudo commented 11 years ago

so I've found issue 71 https://github.com/ducksboard/gridster.js/issues/71, which is basically the same and changed my code to be following:

   $("#pluginGridList > ul").gridster({
   widget_margins: [10, 10],
   widget_base_dimensions: [360, 388],
    namespace: '#pluginGridList'
}).data('#pluginGridList');

$("#sandboxGridList > ul").gridster({

    widget_margins: [10, 10],
    widget_base_dimensions: [40, 40],
    namespace: '#sandboxGridList'
}).data('#sandboxGridList');

This only works when the grids are in that order, and has an odd effect where the smaller grid shrinks into the other grid cell on load, and the shadow for a moving cell doesn't work, but otherwise the functionality is sound.