jQuery UI可排序网格,单元格垂直跨越

Question

这是现有可排序的http://jsfiddle.net/bcAH2/5的链接

只是复制代码,

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

脚本

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

​

我想要实现的是用5 6 7 8这样的单元格填充单元格1 2 3下面的空格......是不是可以拖放？

Answer 1

有一个名为gridster的jQuery插件可能会做你想要的(参见头版中的演示).如本答案中更详细地解释的,更简单但不太灵活的替代方案是创建多个列并使每个列可排序,将它们连接以允许从一个列拖动到另一个.这是一个接近你的例子,但没有一些警告:

• 您可以使用更大height但不更大的图块而不会width弄乱布局(网格没有此限制);
• 你不能在一列中的两个瓷砖之间有"空格"(gridster对此有较少的限制);
• 如果从一列中删除所有图块,它将消失(除非您将其设置为具有固定宽度,包含或不包含内容; gridster没有此限制).