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。
如何引入
import { DragMove } from '@chenzy-design/svelte';基础拖动
包裹子元素即可拖动到任意位置（无约束）
拖我到任意位置
约束在父容器
constrainer="parent"，clamp 到父元素边界内
被约束在虚线框内
handler 指定把手
仅标题栏可发起拖拽（Modal 可拖拽标题栏 recipe）
标题栏（把手）
正文区域不可拖拽，只有标题栏能拖
键盘可达
keyboard 开启后聚焦 + 方向键移动（超越 Semi）
聚焦后按方向键移动
API 参考
DragMove
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
handler | 拖拽触发元素（缺省为整个被包裹子元素） | () => HTMLElement | undefined |
constrainer | 移动约束区。'parent'=父元素，或返回具体容器 DOM；缺省不约束 | (() => HTMLElement | null) | 'parent' | undefined |
allowMove | 谓词：本次是否允许拖拽，返回 false 取消 | (e, element) => boolean | undefined |
customMove | 自定义位置应用（缺省组件直接写 el.style.top/left） | (el: HTMLElement, top: number, left: number) => void | undefined |
allowInputDrag | 是否允许从 input/textarea 等表单元素上发起拖拽 | boolean | false |
keyboard | 把手键盘可达（tabindex + 方向键移动 + aria-label） | boolean | false |
keyboardStep | 键盘方向键移动步长（px） | number | 10 |
class | — | string | '' |
style | — | string | undefined |
onMouseDown | 鼠标按下透传 | (e: MouseEvent) => void | undefined |
onMouseMove | 鼠标移动透传 | (e: MouseEvent) => void | undefined |
onMouseUp | 鼠标抬起透传 | (e: MouseEvent) => void | undefined |
onTouchStart | 触摸开始透传 | (e: TouchEvent) => void | undefined |
onTouchMove | 触摸移动透传 | (e: TouchEvent) => void | undefined |
onTouchEnd | 触摸结束透传 | (e: TouchEvent) => void | undefined |
onTouchCancel | 触摸取消透传 | (e: TouchEvent) => void | undefined |
children | 被拖拽移动的子元素 | Snippet | undefined |
Accessibility
| APG | button |
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-dragmove-cursor | move | 拖拽把手的鼠标光标（默认 move） |