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

我在类别中有一个简单的子类别列表，如下所示：

<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();

但是由于某种原因，“安迪·沃尔夫”可以超越“续集”，成为与“眼镜”相同的水平。

这是我做的小提琴https://jsfiddle.net/2901gLxL/7/

有人可以向我解释我在做什么错吗？

谢谢。

最佳答案

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

尝试这个：

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

        }
    }).disableSelection();

Fiddle

关于javascript - jQuery可排序包含不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45202203/