jquery-ui - 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 插件这可能会满足您的要求(请参阅首页的演示)。一个更简单但不太灵活的替代方案，如 this answer 中更详细地解释。 ，就是创建多个列并使每个列可排序，将它们连接起来以允许从一列拖动到另一列。这是an example接近你的，但没有一些警告:

• 您可以使用更大高度的图 block ，但不能使用更大宽度的图 block ，而不会弄乱布局(gridster 没有此限制)；
• 一列中的两个图 block 之间不能有“空白空间”(gridster 对此的限制较少)；
• 如果您删除一列中的所有图 block ，它将消失(除非您将其设置为固定宽度，无论有或没有内容；gridster 没有此限制)。