javascript – jquery.ui可排序的问题

2023年2月6日 224次阅读

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

-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>

有任何想法吗？多谢你们！

最佳答案 尝试给包含选项一个复杂的选择器,如：

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

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

(来自manual)

As of jQuery 1.3 :not() also support
selectors separated by commas and
complex selectors, for example:
:not(div a) and :not(div,a).

jQuery Sortable手册说containment选项：

Constrains dragging to within the
bounds of the specified element – can
be a DOM element, ‘parent’,
‘document’, ‘window’, or a jQuery
selector.

点赞