JQuery 可排序包含不起作用答案

【问题标题】：JQuery Sortable Containment Not WorkingJQuery 可排序包含不起作用
【发布时间】：2017-07-19 22:40:34
【问题描述】：

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

<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”相同的级别。

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

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

谢谢。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

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

试试这个：

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

        }
    }).disableSelection();

Fiddle

【讨论】：

谈论看不到森林！非常感谢！ :)
没问题 :) 我很高兴它有帮助。

【解决方案2】：

简单的 HTML 错误，看看你的 <li>'s around "Eyewear"

<li>Eyewear
<ul class="cont">
  <li>Andy Wolf</li>
  <li>Matsuda</li>
  <li>Dita</li>
  <li>Barton Perreira</li>
  <li>Theo</li>
</ul></li>    <-- this shouldn't be here!

试试这个：

<li>Eyewear</li>
<ul class="cont">
  <li>Andy Wolf</li>
  ...

【讨论】：