jQuery UI API 类别 - 交互（Interactions）

jQuery UI API 类别 - 交互（Interactions）

Interactions是 jQuery UI 的核心类别之一，它提供了一组基于鼠标的交互功能，作为构建丰富界面和复杂小部件（如 Sortable 列表、拖拽排序等）的基本构建块。这些交互独立于小部件（Widgets），但许多小部件内部依赖它们。

官方文档：https://api.jqueryui.com/category/interactions/（适用于最新版本 1.14.1）

Interactions 包含的 5 个交互组件

| 交互组件 | 描述 | 主要用途与示例

|
|----------------|----------------------------------------------------------------------|-----------------------------------------------------|
|Draggable（可拖拽） | 允许元素使用鼠标拖拽移动，支持约束、辅助器（helper）、快照等选项。 | 实现拖拽排序、画布元素移动等。

|
|Droppable（可放置） | 创建拖拽目标区域，与 Draggable 配合使用，支持 accept、tolerance 等选项。 | 实现拖拽到垃圾桶删除、卡片放入容器等。 |
|Resizable（可调整大小） | 允许元素通过鼠标调整尺寸，支持手柄（handles）、比例保持、网格吸附等。 | 实现窗口大小调整、图像缩放等。 |
|Selectable（可选择） | 使用鼠标框选或点击选择多个元素，支持 Ctrl 多选。 | 实现文件资源管理器式的多选列表。 |
|Sortable（可排序） | 在列表中拖拽排序元素（基于 Draggable），支持连接多个列表、占位符等。 | 实现任务看板、拖拽排序菜单等。 |

基本使用示例

所有交互都遵循 Widget Factory 的统一模式：

$(function(){// Draggable 示例$("#draggable").draggable({revert:"invalid",// 无效放置时回弹helper:"clone"// 拖拽时显示克隆});// Droppable 示例$("#droppable").droppable({accept:"#draggable",drop:function(event,ui){alert("放置成功！");}});// Sortable 示例$("#sortableList").sortable({placeholder:"ui-state-highlight"// 占位样式});});

注意事项

• Interactions 是许多 Widgets（如 Tabs、Accordion）的底层实现基础。
• 支持事件（如 start、drag、stop、over、drop 等），便于自定义行为。
• 项目已进入维护模式（最新 1.14.1），这些交互稳定可靠，但新项目可考虑现代替代（如 HTML5 Drag and Drop API 或 Interact.js）。

如果您想深入某个交互（如 Draggable 的所有选项、事件或完整代码示例），请告诉我！