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

【问题标题】：Sortable jQuery UI list with buttons带有按钮的可排序 jQuery UI 列表
【发布时间】：2014-05-22 17:20:48
【问题描述】：

按照 jQuery UI demo 和 documentation 中的示例，我正在使用这个 HTML：

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

还有这个 JS：

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

但正如this JSFiddle example 中所见，按钮不可拖动。

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

【问题讨论】：

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

【解决方案1】：

Sortable 提供cancel selector 以防止对指定元素进行排序。默认值包括<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>

View on JSFIddle

另外，您可以使用handle option 指定sortable() 的可拖动句柄：

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

但在您的情况下，每个<li> 元素的全部内容都是<button>，因此您不需要指定它。

【讨论】：

打败我！非常感谢！

【解决方案2】：

啊，你知道吗？默认情况下，jQuery UI 会阻止 .sortable() 处理按钮，如the .cancel() section of the documentation 中所述！清除此默认值可让按钮像 this updated example 中一样可排序。

函数式 JS/jQuery 如下所示：

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

【讨论】：