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

Question

遵循 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() 与按钮一起工作？

Answer 1

Sortable 提供了一个 cancel selector以防止对指定元素进行排序。默认值包括 <button>元素，而你的排序句柄是按钮，所以排序被阻止:

cancel
Type: Selector
Default: "input,textarea,button,select,option"
Prevents sorting if you start on elements matching the selector.

要解决这个问题，请设置 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

---

此外，您还可以为 sortable() 指定可拖动 handle 通过使用 handle option :

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

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