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