news 2026/9/3 4:15:00

jQuery UI API 类别 - 交互(Interactions)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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 的所有选项、事件或完整代码示例),请告诉我!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/1 14:02:46

当数据开口说话:虎贲等考AI如何解码数字世界的“沉默语言”

在深夜的实验室里,李博士凝视着屏幕上的数据海洋——三年的实验积累了超过200GB的复杂基因组数据,传统的统计工具已无法处理这些信息间的非线性关联。这是无数研究者的共同困境:我们生活在一个数据富饶的时代,却被困在信息匮乏的孤…

作者头像 李华
网站建设 2026/9/2 12:17:26

5分钟速成UI设计:用draw-a-ui从草图到代码的极简指南

5分钟速成UI设计:用draw-a-ui从草图到代码的极简指南 【免费下载链接】draw-a-ui Draw a mockup and generate html for it 项目地址: https://gitcode.com/gh_mirrors/dr/draw-a-ui 还在为前端开发中繁琐的UI设计而头疼?想要快速将创意转化为实际…

作者头像 李华
网站建设 2026/9/2 19:11:44

Cycle.js终极指南:快速掌握响应式函数式编程框架

Cycle.js终极指南:快速掌握响应式函数式编程框架 【免费下载链接】cyclejs A functional and reactive JavaScript framework for predictable code 项目地址: https://gitcode.com/gh_mirrors/cy/cyclejs 想要构建可预测、易维护的Web应用?Cycle…

作者头像 李华
网站建设 2026/9/3 0:02:18

Windows注册表终极指南:用Rust安全管理系统配置

Windows注册表终极指南:用Rust安全管理系统配置 【免费下载链接】windows-rs Rust for Windows 项目地址: https://gitcode.com/GitHub_Trending/wi/windows-rs 想要轻松管理Windows系统配置?windows-rs项目为你提供了最安全的注册表操作解决方案…

作者头像 李华
网站建设 2026/9/2 12:12:29

3个理由告诉你为什么ES Module Shims是现代前端开发的必备工具

3个理由告诉你为什么ES Module Shims是现代前端开发的必备工具 【免费下载链接】es-module-shims Shims for new ES modules features on top of the basic modules support in browsers 项目地址: https://gitcode.com/gh_mirrors/es/es-module-shims 在现代前端开发中…

作者头像 李华
网站建设 2026/9/2 20:27:56

Kotaemon支持知识新鲜度加权,优先返回最新内容

Kotaemon支持知识新鲜度加权,优先返回最新内容在企业级智能问答系统中,一个常被忽视却影响深远的问题正在浮现:用户得到的答案虽然语义相关,但内容早已过时。想象一下,员工查询最新的差旅报销标准,系统却引…

作者头像 李华