具有垂直跨越单元格的 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 与您的接近，但没有一些警告：

• 你可以有更大的height，但不能有更大的width，而不会弄乱布局（gridster 没有这个限制）；
• 一列中的两个图块之间不能有“空格”（gridster 对此的限制较少）；
• 如果您从一列中删除所有图块，它将消失（除非您将其设置为具有固定宽度的样式，无论是否包含内容；gridster 没有此限制）。

Answer 2

这里的问题不在于拖放，而在于浮动元素的流动。

“四”之后的所有元素都将与其对齐，并且由于它更高 - 它占用更多空间。所以第二排“四”前面的空格其实并不是“格”的一部分。

实际上，这里没有网格，因为您使用的是浮动元素。

希望这可以帮助您理解为什么无法使用当前的样式和脚本来实现。

Answer 3

我发现了这个优雅的插件，ShapeShift，它做得很好

gridster 有另一个分叉版本，值得在这里分享，gridster.js Forked