3

这是现有可排序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");
});

​</p>

我想要实现的是用 5 6 7 8 之类的单元格填充单元格 1 2 3 下方的空间......通过拖放不可能吗？

4

3 回答 3

6

有一个名为gridster的 jQuery 插件可以做你想做的事情（参见首页的演示）。一个更简单但不太灵活的替代方案，如本答案中更详细说明的那样，是创建几列并使每一列可排序，将它们连接起来以允许从一列拖动到另一列。这是一个接近你的例子，但没有一些警告：

  • 您可以使用更大的瓷砖height，但不能使用更大的瓷砖，而width不会弄乱布局（gridster 没有这个限制）；
  • 在一列中的两个图块之间不能有“空格”（gridster 对此的限制较少）；
  • 如果您从一列中删除所有图块，它将消失（除非您将其设置为具有固定宽度，有或没有内容；gridster 没有此限制）。
于 2012-11-13T12:52:13.827 回答
3

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

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

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

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

于 2012-11-12T00:12:42.777 回答
2

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

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

于 2012-11-21T18:57:25.473 回答