帶有按鈕的可排序 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: ''
  });
})