javascript - JQuery 可排序包含不起作用

Question

我有一个简单的类别内子类别列表，如下所示:

<ul class="list">
<li>Eyewear
<ul class="cont">
  <li>Andy Wolf</li>
  <li>Matsuda</li>
  <li>Dita</li>
  <li>Barton Perreira</li>
  <li>Theo</li>
</ul></li>

<li>Merchandise
<ul class="cont">
  <li>Tees</li>
  <li>Tanks</li>
</ul></li>

<li>Accessories</li>
</ul>

对于此示例，我希望能够将“Andy Wolf”移动到其“cont”父级内，但不能移动到其外部。我做了以下事情:

$("ul.list").sortable({
  containment: $(".cont"),
  placeholder: "ui-state-highlight",    
  items: "li",
  axis: 'y',
  revert: true,
  update: function(event, ui){
      //ajax call
  }
}).disableSelection();

但由于某种原因，“Andy Wolf”可以超出“cont”范围，成为与“Eyewear”相同的级别。

这是我制作的 fiddle https://jsfiddle.net/2901gLxL/7/

有人可以向我解释一下我做错了什么吗？

谢谢。

Answer 1

由于您希望 $("ul.cont") 中的列表项可排序，因此您应该定位该容器。

试试这个:

$("ul.cont").sortable({
    containment: 'parent',
    placeholder: "ui-state-highlight",    
    items: "li",
    axis: 'y',
    revert: true,
        update: function(event, ui){

        }
    }).disableSelection();

<强> Fiddle