Javascript jQueryUI可排序-取消属性使无法编辑输入

我在版本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>

这一切都很好，因为我可以编辑输入元素，并在同一时间排序。 但当我添加cancel属性以防止子列表可拖动时，输入字段将无法再进行编辑：

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

我完全不理解这种行为

我对这个问题做了一个代码笔：

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

---

谢谢大家!

根据您的代码笔，我建议如下：

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

请审查：

类型：选择器

默认值：

“>*”

指定元素中哪些项应可排序

---

这将允许对所有

li

而不是

.b

元素进行排序，并使输入字段保持可编辑状态。

根据您的代码笔，我建议如下：

<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(function(){
  jQuery("#a").sortable({
    items: "> li:not(.b)" 
  });
  jQuery("#x").sortable();
});

请审查：

类型：选择器

默认值：

“>*”

指定元素中哪些项应可排序

---

这将允许对所有

li

但不

.b

元素进行排序，并使输入字段保持可编辑状态。

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

<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({cancel: "input, textarea, button, select, option, .b"});

---

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

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

---

怀疑您想要的

项目

的值类似于

>li:not（.b）”

。怀疑您想要的

项目

的值类似于

>li:not（.b）”

。这会增加一些我不想要的行为，因为如果无法排序的元素位于列表顶部，我就不能再在其上方放置任何内容。这就是为什么我使用cancel属性而不是排除项。但最终这是一个进步，因为元素的可食性对我来说至关重要，所以它现在可以作为一个解决办法。谢谢，这增加了一些我不想要的行为，因为如果我不能排序的元素在列表的顶部，我就不能再把任何东西放在上面了。这就是为什么我使用cancel属性而不是排除项。但最终这是一个进步，因为元素的可食性对我来说至关重要，所以它现在可以作为一个解决办法。非常感谢。