结合 Columnizer 和 JQuery 的 Sortable答案

【问题标题】：Combining Columnizer and JQuery's Sortable结合 Columnizer 和 JQuery 的 Sortable
【发布时间】：2012-02-22 00:50:03
【问题描述】：

我有内容：

<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。但是，columnizer 插件将我的可排序 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 提供的“网格”布局，因为我的内容具有不同的高度，并且网格会引入大量空白。

感谢您的任何想法！

【问题讨论】：

我自己取得了进步。我没有引用可排序的 ul ID，而是引用了分列器创建并连接它们的 UL 之间的一个公共 CLASS：
已解决：事实证明可排序不需要使用 ul 和 li。我在我的容器 div 上运行“可排序”，并将可排序的“项目”选项设置为我所有内容 div 之间的公共类。现在可以完美运行。 ...并且stackoverflow不会让我回答我自己的问题，所以我的解决方案在这里:-)

标签： jquery jquery-ui-sortable

【解决方案1】：

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

【讨论】：