带有按钮的可排序 jQuery UI 列表

Question

按照 jQuery UI演示和文档中的示例，我正在使用此 HTML：

<ul class="sort">
  <li>
    <button>A</button>
  </li>
  <li>
    <button>B</button>
  </li>
  <li>
    <button>C</button>
  </li>
</ul>

而这个JS：

$(function () {
  $('.sort').sortable();
})

但正如在这个 JSFiddle 示例中所见，按钮不可拖动。

如何使 .sortable() 与按钮一起工作？

Answer 1

Sortable 提供了一个cancel选择器来防止对指定元素进行排序。 默认值包括<button>元素，并且您的排序句柄是按钮，因此禁止排序：

取消
类型：选择器
默认值：“输入、文本区域、按钮、选择、选项”
如果从与选择器匹配的元素开始，则阻止排序。

要解决此问题，请将cancel选择器设置为空字符串：

 $('.sort').sortable({ cancel: '' });

 ul { list-style: none; margin: 0; padding: 0; width: 100px; } button { width: 100%; }

 <link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <ul class="sort"> <li><button>A</button></li> <li><button>B</button></li> <li><button>C</button></li> </ul>

在 JSFiddle 上查看

---

此外，您可以使用handle选项为sortable()指定可拖动的handle ：

$('.sort').sortable({handle:'button'});

但就您而言，每个<li>元素的全部内容都是一个<button> ，因此您无需指定它。

Answer 2

啊哈，你知道吗？ 默认情况下，jQuery UI 阻止 .sortable() 处理按钮，如文档的 .cancel() 部分所述！ 清除此默认值允许按钮像在此更新的示例中一样可排序。

函数式 JS/jQuery 如下所示：

$(function () {
  $('.sort').sortable({
    cancel: ''
  });
})