DragMove 设计文档

通用拖拽移动容器:包裹单个子元素使其可被拖拽在页面/约束区内自由移动(与 Resizable 改尺寸正交,DragMove 改位置)。core 沉淀通用拖拽原语 createDragMove(命令式绑/解全局监听,pointerdown 记录起点→document 绑 move/up→计算 clamp 到 constrainer 的 top/left→customMove 或写 style→up 解绑+卸载兜底),供 Modal 可拖拽标题栏、Cropper 画布拖拽后续收敛复用。约束区支持 parent/自定义 DOM/无约束;allowMove 谓词拦截;allowInputDrag 控制是否从表单元素发起。超越 Semi:可选把手键盘可达(tabindex + 方向键移动 + i18n aria-label)、触摸 touch-action:none。

← API 文档

使用建议

通用拖拽移动容器:包裹单个子元素使其可被拖拽在页面/约束区内自由移动(与 Resizable 改尺寸正交,DragMove 改位置)。core 沉淀通用拖拽原语 createDragMove(命令式绑/解全局监听,pointerdown 记录起点→document 绑 move/up→计算 clamp 到 constrainer 的 top/left→customMove 或写 style→up 解绑+卸载兜底),供 Modal 可拖拽标题栏、Cropper 画布拖拽后续收敛复用。约束区支持 parent/自定义 DOM/无约束;allowMove 谓词拦截;allowInputDrag 控制是否从表单元素发起。超越 Semi:可选把手键盘可达(tabindex + 方向键移动 + i18n aria-label)、触摸 touch-action:none。

Accessibility

设计变量

变量默认值用法
--cd-dragmove-cursor move拖拽把手的鼠标光标(默认 move)