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>

对于这个例子，我希望能够移动＆＃34; Andy Wolf＆＃34;在它的＆＃34; cont＆＃34;父母，但不在其之外。我做了以下事情：

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

但出于某种原因＆＃34; Andy Wolf＆＃34;可以走出＆＃34; cont＆＃34;并与＃34; Eyewear＆＃34;成为同一级别。

这是我制作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

Answer 2

简单的HTML错误，请看看<li>周围的“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>
  ...

JQuery可排序包含不起作用

2 个答案: