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();

一切正常，因为我可以编辑输入元素并同时排序。但是当我添加cancel-property以防止子列表被拖动时，输入字段就不能再被编辑了：

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

我根本不理解这种行为。

我制作了问题的代码：https://codepen.io/DesmondTMB/pen/oGgjYX

如果有人能解决这个问题，我将非常感激。我试图让它从小时起按照我想要的方式行事。

谢谢！

Answer 1

根据您的CodePen，我会建议以下内容：

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

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

输入：选择器

默认值："> *"

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

这样，所有li但不是.b元素都可以排序，并且可以将输入字段保留为可编辑状态。

Answer 2

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

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

jQueryUI Sortable - cancel-property无法编辑输入

2 个答案: