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 的所有选项、事件或完整代码示例),请告诉我!