Javascript 可嵌套JQuery的问题

我有这个jQuery嵌套列表模块：

这是一个旧版本，不再受支持。也有类似的软件包，但这个很容易使用，而且很干净

演示的工作原理是：

演示：

我开始将演示代码粘贴到我的Rails应用程序中，它按预期工作，除了一个除了视频之外我很难解释的重大问题：

列表项将不会缩进，直到您稍微将它们向上拖动到父项上。在演示中，这些只知道在特定的y鼠标移动后缩进

我创作了一把小提琴：

它在小提琴上也很好用。我不能轻易地发布我的代码-这是生产。我怀疑代码中有外部嵌套的div等。I标准顶部导航栏/侧面导航栏/内容布局。最疯狂的是，我在这个网站上使用的模板将此作为一个演示，而且效果也很好：

我见过像这样的问题，元素位置等都被这抛在脑后。我在工具提示等方面遇到了一些问题，通过以下方式解决了这些问题：

$('body').nestable({
  selector: '.dd'
});

vs

---

不幸的是，我的JS/jQuery/CSS技能有限，不知道从哪里开始寻找。我将开始玩小提琴，直到我打破它来重现这个问题——只是希望有人能建议一个修复方案或从哪里开始查找。

结果是，我忽略了一个事实，即在我的代码中，我在一个

字段中为一个表单中的
循环构建列表。在列表项之间插入额外的隐藏输入。这导致了错误

<div class="dd" id="nestable">   <ol class="dd-list">
    <li class="dd-item" data-id="1">
      <div class="dd-handle">1 - Lorem ipsum</div>
    </li>

    <input type="hidden" value="4" name="items_attributes[0][id]" id="items_attributes_0_id">

    <li class="dd-item" data-id="2"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
      <div class="dd-handle">2 - Dolor sit</div>
      <ol class="dd-list">
        <li class="dd-item" data-id="3">
          <div class="dd-handle">3 - Adipiscing elit</div>
        </li>
        <li class="dd-item" data-id="4">
          <div class="dd-handle">4 - Nonummy nibh</div>
        </li>
      </ol>
    </li>
    <li class="dd-item" data-id="5"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
      <div class="dd-handle">5 - Consectetuer</div>
      <ol class="dd-list">
        <li class="dd-item" data-id="6">
          <div class="dd-handle">6 - Aliquam erat</div>
        </li>
        <li class="dd-item" data-id="7">
          <div class="dd-handle">7 - Veniam quis</div>
        </li>
      </ol>
    </li>
    <li class="dd-item" data-id="8">
      <div class="dd-handle">8 - Tation ullamcorper</div>
    </li>
    <li class="dd-item" data-id="9">
      <div class="dd-handle">9 - Ea commodo</div>
    </li>   </ol> </div>



1-同侧眼底

CollapseExpand
2-多洛坐

3-发展精英


4-非乌米尼布


CollapseExpand
5-康塞特图尔

6-Aliquam erat


7-维尼安·奎斯



8-阿姆科珀酒店


9-Ea commodo


如果表单输入在'dd handle'div内，则一切正常

<div class="dd" id="nestable">   <ol class="dd-list">
    <li class="dd-item" data-id="1">
      <div class="dd-handle">1 - Lorem ipsum</div>
    </li>

    <input type="hidden" value="4" name="items_attributes[0][id]" id="items_attributes_0_id">

    <li class="dd-item" data-id="2"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
      <div class="dd-handle">2 - Dolor sit</div>
      <ol class="dd-list">
        <li class="dd-item" data-id="3">
          <div class="dd-handle">3 - Adipiscing elit</div>
        </li>
        <li class="dd-item" data-id="4">
          <div class="dd-handle">4 - Nonummy nibh</div>
        </li>
      </ol>
    </li>
    <li class="dd-item" data-id="5"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
      <div class="dd-handle">5 - Consectetuer</div>
      <ol class="dd-list">
        <li class="dd-item" data-id="6">
          <div class="dd-handle">6 - Aliquam erat</div>
        </li>
        <li class="dd-item" data-id="7">
          <div class="dd-handle">7 - Veniam quis</div>
        </li>
      </ol>
    </li>
    <li class="dd-item" data-id="8">
      <div class="dd-handle">8 - Tation ullamcorper</div>
    </li>
    <li class="dd-item" data-id="9">
      <div class="dd-handle">9 - Ea commodo</div>
    </li>   </ol> </div>