Question

我有内容：

<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>

我正在使用columnizer plugin将我的内容分成两列，如下所示：

<div class="first column" style="width:50%; float: left;">
  <div>content</div>
  <div>content</div>
  <div>content</div>
</div>
<div class="last column" style="width:50%; float: left;">
  <div>content</div>
  <div>content</div>
</div>

我还想使用JQuery's Sortable function让我的内容可以排序。这要求我在每个内容部分周围添加一个UL包装器和LI。但是，列化器插件将我的可排序UL分成两个UL（具有相同的ID ......），只允许第一列进行排序：

<ul id='sortable'>
  <div class="first column" style="width:50%; float: left;">
    <li><div>content</div></li>
    <li><div>content</div></li>
    <li><div>content</div></li>
  </div>
</ul>                   //inserted by columnizer
<ul id='sortable'>      //inserted by columnizer
  <div class="last column" style="width:50%; float: left;">
    <li><div>content</div></li>
    <li><div>content</div></li>
  </div>
</ul>

我可以将“columnizer”配置为不执行此操作吗？
如果没有，是否有更好的（并且支持的）方法来制作没有它的列？
我想避免使用JQuery提供的“网格”布局，因为我的内容有不同的高度，网格会引入很多空白。

感谢您的任何想法！

Answer 1

结果是可排序的，不需要使用<ul>和<li>。我在容器div上运行sortable()，并将sortable的item选项设置为我所有内容div之间的公共类。

结合Columnizer和JQuery的Sortable

1 个答案: