前端UI组件【免费下载链接】draggableThe JavaScript Drag Drop library your grandparents warned you about.项目地址https://gitcode.com/gh_mirrors/dr/draggable点击查看免费下载Focusable 是 Draggable 拖拽库内置的四个默认插件Announcement、Focusable、Mirror、Scrollable之一其核心职责是在拖拽库初始化时为所有 draggable 容器与可拖拽元素自动补全tabindex属性使它们能够通过键盘获得焦点从而让鼠标拖拽交互具备键盘可达性基础。阅读完本文你将掌握 Focusable 的 API 用法、它与 Draggable 生命周期的绑定关系、其只增不覆盖、可完整回滚的装饰策略以及如何用测试用例验证插件行为。Focusable 插件是什么按照 src/Draggable/Plugins/Focusable/README.md 的定位Focusable 插件在初始化时查找所有 draggable 容器和 draggable 元素并为它们装饰tabindex属性它不会覆盖元素上已存在的tabindex属性它会使 draggable 元素和容器变得可聚焦focusable为后续接入键盘拖拽、屏幕阅读器辅助等无障碍能力打下基础。从 src/Draggable/Plugins/index.js 可以看到Focusable 与 Announcement、Mirror、Scrollable 一同作为默认插件导出而在 Draggable 核心实现中它被挂载到静态属性Draggable.Plugins上static Plugins {Announcement, Focusable, Mirror, Scrollable};这意味着默认情况下每个new Draggable(...)实例都会自动装载 Focusable 插件无需任何额外配置。工作原理初始化装饰、销毁还原Focusable 的实现位于 src/Draggable/Plugins/Focusable/Focusable.js它继承自共享抽象基类 AbstractPlugin。整个生命周期分两个阶段1. 监听 Draggable 生命周期事件插件通过attach()注册两个事件监听通过detach()注销并主动执行清理attach() { this.draggable .on(draggable:initialize, this[onInitialize]) .on(draggable:destroy, this[onDestroy]); } detach() { this.draggable .off(draggable:initialize, this[onInitialize]) .off(draggable:destroy, this[onDestroy]); // Remove modified elements when detach this[onDestroy](); }即拖拽库初始化时装饰 tabindex销毁时还原即使插件被手动removePlugin移除走detach()也会同步触发还原逻辑不会留下残留属性。2. 下一帧执行避免阻塞首屏两个处理函数都用requestAnimationFrame延迟到下一渲染帧执行避免初始化阶段对页面造成可见的布局抖动[onInitialize]() { requestAnimationFrame(() { this.getElements().forEach((element) decorateElement(element)); }); } [onDestroy]() { requestAnimationFrame(() { this.getElements().forEach((element) stripElement(element)); }); }3. 装饰与还原的核心算法decorateElement与stripElement配合一个模块级数组elementsWithMissingTabIndex实现只增不覆盖、精准回滚function decorateElement(element) { const hasMissingTabIndex Boolean( !element.getAttribute(tabindex) element.tabIndex -1, ); if (hasMissingTabIndex) { elementsWithMissingTabIndex.push(element); element.tabIndex 0; } } function stripElement(element) { const tabIndexElementPosition elementsWithMissingTabIndex.indexOf(element); if (tabIndexElementPosition ! -1) { element.tabIndex -1; elementsWithMissingTabIndex.splice(tabIndexElementPosition, 1); } }这段逻辑非常关键它保证了三种边界情况的正确性已显式设置tabindex属性的元素element.getAttribute(tabindex)非空不装饰、不记录销毁时原样保留本身可聚焦的原生控件如button其tabIndex默认为 0不满足element.tabIndex -1同样被跳过真正缺失 tabindex 的普通元素如li、divtabIndex为 -1才被记录并设为tabIndex 0销毁时精确还原为 -1。由于只有被记录进elementsWithMissingTabIndex的元素才会在stripElement中被还原插件销毁时绝不会误伤开发者自己的tabindex配置。API 参考依据插件文档Focusable 对外暴露两个 APInew Focusable(draggable: Draggable): Focusable创建一个 Focusable 插件实例。正常情况下无需手动实例化——Draggable 构造时会把Draggable.Plugins中的默认插件自动addPlugin见 Draggable.js用户传参中的options.plugins会被追加到默认插件之后。若确实需要手动创建可仿照框架内部的用法import {Draggable, Plugins} from draggable; const draggable new Draggable(containers, { plugins: [/* 自定义插件 */], }); const focusable new Plugins.Focusable(draggable); focusable.attach();focusable.getElements(): HTMLElement[]返回容器与 draggable 元素的并集这也是内部装饰逻辑所作用的元素集合getElements() { return [ ...this.draggable.containers, ...this.draggable.getDraggableElements(), ]; }其中draggable.containers是构造时传入的容器数组draggable.getDraggableElements()则是在每个容器内按options.draggable选择器默认.draggable-source查找并过滤掉 mirror 与原始源元素见 Draggable.js 的 getDraggableElements 实现。你可以用它主动获取被装饰的元素列表例如在无障碍测试中断言焦点顺序。Options无配置项插件文档明确标注No options源码也证实了这一点——Focusable.js 中的defaultOptions {}虽然实现了getOptions()读取this.draggable.options.focusable || {}以兼容未来的配置扩展但目前没有任何可调参数。行为完全由 Draggable 实例的 containers 与 draggable 选择器决定传入的容器越精确、选择器越具体被装饰的元素范围就越可控。如果你希望禁用该插件例如你已经在业务侧自行管理 tabindex可以通过 Draggable 的exclude.plugins选项排除import {Draggable, Plugins} from draggable; const draggable new Draggable(containers, { exclude: { plugins: [Plugins.Focusable], }, });Draggable 构造时会用!this.options.exclude.plugins.includes(Plugin)过滤默认插件Draggable.js被排除的插件将不会被实例化。测试验证四类行为断言Focusable.test.js 用一组沙箱 DOM 完整验证了插件行为可作为理解与回归的权威依据测试用例断言内容说明is included by defaultnew Draggable后能在draggable.plugins中找到 Focusable 实例验证默认装载行为sets tabindex properties容器与 draggable 元素在初始化后tabIndex 0验证装饰逻辑removes tabindex propertiesdraggable.destroy()后元素tabIndex -1验证还原逻辑does not remove tabindex properties for natively focusable elementsbutton销毁后tabIndex仍为 0验证不误伤原生可聚焦元素does not remove tabindex properties for element with tabindex attribute带tabindex1的元素销毁后值不变验证不覆盖显式属性测试中通过waitForRequestAnimationFrame()等待装饰/还原动作完成与源码中requestAnimationFrame的异步设计相呼应。使用建议与注意事项它是键盘可达性的前提而非完整键盘拖拽方案Focusable 只负责让容器与可拖拽元素获得焦点tabindex0真正用键盘触发拖拽还需结合draggable:start等事件的按键监听可在 DragEvent 文档 中进一步了解事件体系。尽量缩小容器范围Focusable 会装饰所有容器及其内所有匹配选择器的元素若容器过大被装饰元素数量也会随之膨胀。销毁顺序调用draggable.destroy()或removePlugin(Plugins.Focusable)都会触发还原且还原是异步下一帧的需要即时断言时应等待一帧。与自定义 tabindex 和平共处正因为不覆盖、只还原自己动过的元素这一设计Focusable 可以放心与业务侧的手动tabindex管理共存。综上Focusable 是 Draggable 无障碍体系中的地基插件体积小、零配置通过一次初始化扫描为整套拖拽界面补齐键盘焦点入口并在销毁时干净利落地还原现场——这份增得克制、撤得彻底的实现值得在需要键盘可达性的拖拽交互中放心使用。输出文章赞分享前端UI组件【免费下载链接】draggableThe JavaScript Drag Drop library your grandparents warned you about.项目地址https://gitcode.com/gh_mirrors/dr/draggable点击查看免费下载相关推荐解决vue-draggable-plus中拖拽容器重叠时的元素抖动问题解决vue draggable plus中拖拽容器重叠时的元素抖动问题 在Vue.js项目中使用vue draggable plus实现拖拽功能时开发者可能会前端UI组件告别拖拽失效React Draggable让SVG元素动起来的实战方案告别拖拽失效React Draggable让SVG元素动起来的实战方案 你是否曾在开发SVG可缩放矢量图形交互界面时遇到拖拽功能突然失效的问题明明在普前端UI组件Plain-Draggable简单高效的HTML/SVG元素拖拽库Plain Draggable简单高效的HTML/SVG元素拖拽库 1. 项目基础介绍 Plain Draggable 是一个开源项目提供了一种简单且性能卓创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考