Question

Here is the link to existing sortable http://jsfiddle.net/bcAH2/5

Just copying the code,

 <ul id="sortable">
   <li class="ui-state-default">1</li>
   <li class="ui-state-default">2</li>
   <li class="ui-state-default">3</li>
   <li class="ui-state-default four">4</li>
   <li class="ui-state-default">5</li>
   <li class="ui-state-default">6</li>
   <li class="ui-state-default">7</li>
   <li class="ui-state-default">8</li>
   <li class="ui-state-default">9</li>
   <li class="ui-state-default">10</li>
   ...
</ul>

​
Script

$(function() {
   $( "#sortable" ).sortable();
   $( "#sortable" ).disableSelection();
   $("#sortable .four").css("height","190px");
});

​

What I am trying to achieve is to fill spaces below cells 1 2 3 with cells like 5 6 7 8… Is it not possible by drag and drop?

Answer 1

I found this elegant plugin, ShapeShift which does the job nicely

There is another forked version of gridster, thought worth sharing here, gridster.js Forked