GridStack.js - размещение некоторых элементов в определенных местах, в то время как остальные заполняются элементами-заполнителями

Question

Я пытаюсь использовать gridstack.js для динамического построения плитки. Некоторые из плиток, которые я хочу разместить в определенных местах, а остальные я просто хотел бы разместить в любой незанятой плитке. Плитки-заполнители всегда будут иметь ширину 1 и высоту 1, но остальные элементы могут быть больше.

Я пытаюсь сделать что-то вроде этого:

<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>

Где у меня есть все определенные размещения вверху, сопровождаемые плитками наполнителя. Плитки-заполнители не будут иметь местоположения x и y.

Я мог бы вручную создать свою собственную сетку, перебирая плитки-заполнители и помещая конкретные, куда они должны идти, но я надеюсь, что js сделает это для меня.

Кто-нибудь делал это раньше? Есть ли способ сделать это?

Answer 1

Я делал это раньше. У меня есть готовая сетка, и я добавляю блоки динамически.
Просто сделай это:

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

И это добавит блок и даст ему определенную ширину и высоту. 0 , 0 это указать, что вы хотите, чтобы это место было где угодно от x=0 и y=0.
Я полагаю, вы меняете его на 3 , 4 не будет иметь никакого значения в вашем примере.

Просто вопрос, почему вы работаете со списками, а не с div, как это было предложено?