jQueryUI Sortable - 取消属性无法编辑输入答案

【问题标题】：jQueryUI Sortable - cancel-property leaves unable to edit inputjQueryUI Sortable - 取消属性无法编辑输入
【发布时间】：2017-09-13 17:31:10
【问题描述】：

我在 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"});

我完全不理解这种行为。

我对这个问题做了一个codepen：https://codepen.io/DesmondTMB/pen/oGgjYX

如果有人能解决这个问题，我将不胜感激。我试图让它按照我想要的方式行事。

谢谢！

【问题讨论】：

怀疑你想要items 的值类似于"> li:not(.b)"。

标签： javascript jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

根据您的 CodePen，我会提出以下建议：

jQuery(function(){
  jQuery("#a").sortable({
    items: "> li:not(.b)" 
  });
  jQuery("#x").sortable();
});

请查看：http://api.jqueryui.com/sortable/#option-items

类型：选择器

默认："> *"

指定元素内的哪些项目应该是可排序的。

这将允许所有 li 但不是 .b 元素可排序，并且输入字段可编辑。

【讨论】：

这增加了一些我不想要的行为，因为如果我无法排序的元素位于列表的顶部，我就不能再删除它上面的任何东西了。这就是我使用取消属性而不是排除项目的原因。但最终它是一种改进，因为元素的可食用性对我来说至关重要，所以它现在可以作为一种解决方法。谢谢

【解决方案2】：

取消的默认值为“输入、文本区域、按钮、选择、选项”。当您仅输入 .b 时，它会覆盖默认值。所以你需要在你的取消中添加默认值。

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

【讨论】：