Question

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

-first_level
-first_level
 -second_level
 -second_level
-first_level

“第一级”不应该进入“第二级”，反之亦然。我以为我可以用收容选项做到这一点，但那里没有骰子。它可以保持第二级不在第一级，但不是相反。

这是我的示例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>

有什么想法吗？谢谢你们！

Answer 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）and：not（div，a）。

jQuery Sortable手册说containment选项：

约束拖到内部指定元素的边界 - 可以是一个DOM元素，'父母'， 'document'，'window'或jQuery 选择器。

Answer 2

好的，看起来我发现了问题。我声明：物品：'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'，而不用担心列表发生碰撞。

jquery.ui可排序的问题

2 个答案: