HTML5拖拽API可通过键盘事件实现无障碍支持：1.用Space/Enter键启动拖拽并模拟dragstart；2.方向键微调投放位置；3.Esc键中断拖拽；4.Enter键在目标区完成投放；需统一状态机同步键盘与原生拖拽生命周期。
HTML5 拖拽 API 本身不直接响应键盘操作，但可通过监听键盘事件（如 Enter、Space、方向键、Esc）主动触发或干预拖拽流程，实现无障碍支持与增强控制。关键在于用键盘“模拟”拖拽意图，并与原生 drag 事件协同管理状态。
键盘启动拖拽：替代鼠标按下
原生拖拽需鼠标长按并移动，对键盘用户不友好。可为可拖拽元素添加 tabindex="0"，使其可聚焦，再监听 Space 或 Enter 键触发拖拽准备：
- 按下 Space/Enter 时，调用 element.draggable = true，并手动触发 dragstart（需创建 MouseEvent 模拟）
- 同时记录当前激活元素，用于后续键盘移动或释放逻辑
- 视觉上应提供明确反馈，如添加 aria-dropeffect="move" 和高亮边框
方向键微调位置：补充拖拽精度
在拖拽进行中（即 dragover 或 dragenter 触发后），监听方向键可动态调整目标位置，尤其适用于网格布局或精细排序场景：
- 捕获 keydown 事件，判断是否处于“拖拽活跃态”（例如通过全局变量 isDragging = true 标记）
- 方向键每次按下，计算相邻可投放区域（如兄弟元素、网格单元格），调用 event.preventDefault() 阻止默认滚动，并更新预览指示器位置
- 配合 data-transfer 中携带的索引信息，实现“键盘拖放定位”而非仅视觉位移
Esc 中断拖拽：提供明确退出路径
拖拽过程中用户可能误触或改变意图，Esc 是最符合直觉的中断方式：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 监听全局 keydown，检测 event.key === 'Escape'
- 触发 dragend 事件（同样需手动 dispatch），重置 draggable 属性与 UI 状态
- 若已进入某个 droppable 区域，应主动触发 dragleave，避免残留高亮或错误状态
键盘释放：用 Enter 完成投放
当拖拽元素悬停在有效投放区时，允许用户按 Enter 替代鼠标松开，完成投放动作：
- 在 dragover 期间，为目标区域添加 aria-grabbed="true" 和焦点样式
- 监听目标区域的 keydown，捕获 Enter 键后，阻止默认行为，调用 drop 逻辑（如移动 DOM、更新数据）
- 同步触发 drop 和 dragend 原生事件，确保监听器能统一处理
不复杂但容易忽略的是状态同步——键盘操作必须与 drag 事件生命周期严格对齐，否则会出现“键盘说在拖，API 说没拖”的不一致。建议用单一状态机（如 { idle, dragging, dropping }）驱动所有交互分支。
