javascript - jQueryUI Sortable - 取消属性使无法编辑输入

Question

我在版本 1.12.1 中使用 jquery-3.2.1.min.js 和 jquery-ui.min.js

我想创建一个可排序列表，在该列表中我有某些我不想排序的元素(准确地说是其他可排序列表)。输入元素保持可编辑状态非常重要。

<ul id="a">
  <li>sometext<input value="1" /></li>
  <li>moretext<input value="2" /></li>
  <li class="b">
    <ul>
      <li>text<input value="3" /></li>
      <li>blarg<input value="4" /></li>
    </ul>
  </li>
  <li>last<input value="5" /></li>
</ul>

当我像这样初始化可排序时:

jQuery("#a").sortable();

一切正常，因为我可以编辑输入元素并同时进行排序。但是，当我添加取消属性以防止子列表可拖动时，输入字段将无法再编辑:

jQuery("#a").sortable({cancel: ".b"});

我根本不理解这种行为。

我用代码笔解决了这个问题:https://codepen.io/DesmondTMB/pen/oGgjYX

如果有人能解决这个问题，我将不胜感激。几个小时以来，我一直在努力让它按照我想要的方式运行。

谢谢!

Answer 1

取消的默认值为“input,textarea,button,select,option”。当您仅输入 .b 时，它将覆盖默认值。因此，您需要将默认值添加到取消中。

jQuery("#a").sortable({cancel: "input, textarea, button, select, option, .b"});