jQuery UI API 类别 - 交互（Interactions）

交互（Interactions）是指在处理用户与网页元素互动的过程中，通过jQuery UI提供的一些交互API来影响网页元素的动作或事件。本文将详细介绍jQuery UI API 类别 - 交互的相关API。

可拖拽（Draggable）

可拖拽（Draggable）指的是元素可被拖拽。可以通过以下代码将一个元素设置为可拖拽：

$( "#element" ).draggable();

在上面的代码中，#element 为需要被拖拽的元素的ID。默认情况下，当元素可拖拽时，用户可以通过点击该元素，并按住鼠标不放，拖拽该元素。

可缩放（Resizable）指的是元素可拉伸/缩放。可以通过以下代码将一个元素设置为可缩放：

$( "#element" ).resizable();

在上面的代码中，#element 为需要被缩放的元素的ID。默认情况下，当元素可缩放时，用户可以通过点击该元素的边框线，并按住鼠标不放，拖拽该边框线以改变元素的大小。

可选择（Selectable）指的是元素可被选择。可以通过以下代码将一个元素设置为可选择：

$( "#element" ).selectable();

在上面的代码中，#element 为需要被选择的元素的ID。默认情况下，当元素可选择时，用户可以通过鼠标点击该元素，或通过按住鼠标并拖拽选择区域来选择该元素。

放置（Droppable）指的是元素可被拖拽到容器中的某个位置上。可以通过以下代码将一个元素设置为可被放置：

$( "#container" ).droppable({
  drop: function( event, ui ) {
    // 放置成功后的回调函数
  }
});

在上面的代码中，#container 为容器的ID。默认情况下，当元素可被放置时，用户可以通过按住鼠标并拖拽元素，将该元素拖拽到容器中某个位置上。

排序（Sortable）指的是容器内的多个元素可以进行排序。可以通过以下代码将一个容器内的多个元素设置为可排序：

$( "#container" ).sortable();

在上面的代码中，#container 为容器的ID。默认情况下，当容器内的元素可排序时，用户可以通过按住鼠标并拖拽元素，将该元素拖拽到容器内进行排序。

以上API均可接受一些参数，这些参数用于限定或定义某些功能的特性。在下面的例子中，我们将元素设置为可拖拽，并限制拖拽区域只能在父元素内进行：

$( "#element" ).draggable({
  containment: "parent"
});

在上面的代码中，containment 是可拖拽API的一个选项。通过设置 containment 的值为 parent，可以使得元素只能在父元素内拖拽。

以上就是jQuery UI API 类别 - 交互的相关API介绍，包括可拖拽、可缩放、可选择、放置以及排序等功能。这些API大大提升了用户与网页元素之间的交互体验，也为网页开发带来了更多的便利性。