jQuery UI 可排序句柄选项

jQuery UI 是一个流行的 JavaScript 库，它为用户界面元素提供了丰富的交互效果和动画效果。其中之一是可排序功能，它允许元素从一个容器拖动到另一个容器，并自动排序。而可排序句柄选项则为用户提供了更细致的控制，允许只有特定元素才允许拖动。

可排序功能的基本使用

要使用 jQuery UI 的可排序功能，需要将目标元素转成可排序元素。以下是一个基本示例：

<div id="sortable">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

$(function() {
  $("#sortable").sortable();
});

代码解析：

• 首先，我们在 HTML 中创建了一个 <div>，其中包含三个 <div> 子元素，即三个项目。
• 然后在 JavaScript 中，我们通过 sortable() 方法将 #sortable 元素转换成可排序元素。

可排序句柄选项的使用

上述示例使所有子元素，都变成了可排序元素，如果我们只想某一个子元素才可以拖动，我们就需要使用可排序句柄选项了。

<div id="sortable">
  <div class="handle">以我为句柄</div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

$(function() {
  $("#sortable").sortable({
    handle: ".handle"
  });
});

代码解析：

• 在 HTML 中，我们增加了一个 handle 类，用作句柄。
• 在 JavaScript 中，我们使用 handle 选项，它接收一个选择器作为唯一参数，这里我们设置为 .handle。这些具有该类的元素将是唯一允许拖动的元素。

总结

可排序句柄选项提供了更细致的元素控制，使得我们可以控制哪些元素允许拖动排序。通过这个选项，用户不需要拖动整个元素，只需拖动句柄即可。