jQuery UI Sortable handle 选项

jQuery UI 的 Sortable 组件提供了一个 handle 选项，该选项用于指定拖动元素的句柄。在本教程中，我们将详细介绍 Sortable 的 handle 选项的使用方法。

handle 选项基本语法如下：

$( ".selector" ).sortable({
  handle: ".handle-selector"
});

其中，".selector" 是 Sortable 的 CSS 选择器，handle 是选项名称，".handle-selector" 是句柄的 CSS 选择器。

以下两个示例说明：

示例一：使用 Sortable 的 handle 选项指定拖动元素的句柄

$( "#my-sortable" ).sortable({
  handle: ".drag-handle"
});

这将创建一个名为 my-sortable 的 Sortable，并将其绑定到 handle 选项。当拖动元素时，只有拖动元素内部的 .drag-handle 元素才能用作句柄。

示例二：使用 Sortable 的 handle 选项指定拖动元素的句柄，并设置句柄的样式

$( "#my-sortable" ).sortable({
  handle: ".drag-handle",
  start: function( event, ui ) {
    ui.helper.css({
      "background-color": "yellow",
      "border": "1px solid black"
    });
  }
});

这将创建一个名为 my-sortable 的 Sortable，并将其绑定到 handle 选项。当拖动素时，只有拖动元素内部的 .drag-handle 元素才能用作句柄。此外，我们还在 start 事件处理程序中设置了句柄元素的样式。

总结：

jQuery UI 的 Sortable 组件提供了一个 handle 选项，该选项用于指定拖动元素的句柄。要使用 handle 选项，需要将其应用于 Sortable 的 jQuery 对象即可。可以在设置 handle 选项的同时设置其他选项，例如事件处理程序。