Search code examples
javascriptgridstack

GridStack.js - Placing some items in specific locations while populating the rest with filler items

I am trying to use gridstack.js to dynamically build a tile wall. Some of the tiles I want placed in specific locations, while the rest I simply would like to place in any unoccupied tile. The filler tiles will always have a width of 1 and height of 1, but the other items may be larger.

I am attempting to do something like this:

<ul class="tiles-container">
   <!-- Specific Placement -->
   <li class="grid-stack-item" data-gs-x="1" data-gs-y="0" data-gs-width="2" data-gs-height="1">
      Some Text
   </li>
   <li class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="1" data-gs-height="2">
      Some Text
   </li>
   <!-- Filler Tiles -->
   <li class="grid-stack-item" data-gs-width="1" data-gs-height="1">
      Some Filler Text
   </li>
   <li class="grid-stack-item" data-gs-width="1" data-gs-height="1">
      Some Filler Text
   </li>
</ul>

Where I have all of the specific placements at the top followed by the filler tiles. The filler tiles would not have an x and y location.

I could manually create my own grid by looping through the filler tiles and placing the specific ones where they need to go, but I am hoping the js will do this for me.

Has anyone done this before? Is there a way this can be done?

Solution

  • I have done this before. I have a pre-made grid, and I add blocks dynamically.
    Just do this:

    var grid = $('.grid-stack').data('gridstack');
grid.addWidget($('<li class="grid-stack-item-content"></li>') , 0 , 0 , customWidth, customHeight , true );

    And this will add the block and give it defined width and height. the 0 , 0 is to specify that you want it place anywhere possible from x=0 and y=0.
    I suppose you changing it to 3 , 4 wouldn't make a difference in your example.

    Just a question though, why do you work with lists rather than divs as suggested?