jquery.ui 可排序问题答案

【问题标题】：jquery.ui sortable issuejquery.ui 可排序问题
【发布时间】：2009-05-05 20:36:37
【问题描述】：

我创建了一个具有拖放功能的嵌套列表。我的问题是我希望每个嵌套都自行排序。例如：

-第一级 -第一级 -第二级 -第二级 -第一级

“一级”不能进入“二级”，反之亦然。我以为我可以使用遏制选项来做到这一点，但那里没有骰子。它可以使第二层远离第一层，但反之则不行。

这是我的示例 JS 和列表：

$("#sort_list").sortable({
  containment: '#sort_list',                                             
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});
$(".sub_list").sortable({ 
  containment: 'parent',
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8,
});
$("#sort_list").disableSelection();

<ul id="sort_list">
  <li>one</li>
  <li>two
    <ul class="sub_list">
    <li>sub one</li>
    <li>sub two</li>
    </ul>
  </li>
  <li>three</li>
  <li>four</li>
</ul>

有什么想法吗？谢谢大家！

【问题讨论】：

如果它至少在 FF 中工作我会很高兴。目前，当前的拖放功能适用于所有浏览器。

标签： javascript jquery jquery-ui

【解决方案1】：

尝试给包含选项一个复杂的选择器，例如：

$("#sort_list").sortable({
  containment: '#sort_list:not(.sub_list)',                                                                                     
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});

如果您使用的是 jQuery 1.3+，那应该可以解决问题：

（来自manual）

从 jQuery 1.3 开始：not() 也支持用逗号分隔的选择器和复杂的选择器，例如： :not(div a) 和 :not(div,a)。

jQuery Sortable 手册说containment 选项：

限制拖动到指定元素的边界 - 可以是一个 DOM 元素，'父'， “文档”、“窗口”或 jQuery 选择器。

【讨论】：

要是这么简单就好了！哈，这就是我试图在现场写一个例子的结果。据我所知，这不是类名的问题。
老实说，我对选择器很陌生，但我检查了 jquery API，它们看起来很简单。我在stiprojects.com/sortable.html 设置了一个快速演示，其中包含您建议的更改。你可以看到它们是如何滑到一起的。还有一点令人沮丧的是，使用“遏制”使得顶部和底部列表很难切换。

【解决方案2】：

好的，看来我找到了问题所在。我在声明：items: 'li'，因此它没有将 UL 检测为容器/可分类项目。非常感谢 karim79 帮助我思考这一切 :)

下面是工作代码（基本上是说“每个人都呆在自己的容器里”）：

    $("#sort_list").sortable({
      containment: 'parent',                                                                                     
      axis: 'y',
      revert: true,
      opacity: 0.8
    });
    $(".sub_list").sortable({ 
      containment: 'parent',
      axis: 'y',
      revert: true,
      opacity: 0.8,
    });
    $("#sort_list").disableSelection();

    <ul id="sort_list">
      <li>one</li>
      <li>two
        <ul class="sub_list">
        <li>sub one</li>
        <li>sub two</li>
        </ul>
      </li>
      <li>three</li>
      <li>four</li>
    </ul>

现在我们已经解决了“item: li”的问题，我们甚至可以从顶部列表中删除包含：“parent”，而不必担心列表冲突。

【讨论】：