useBrowserPointerItemDrag
浏览器 pointer 拖拽 composable:阈值激活、多选规则、文件夹落点与跟手回调。
函数签名
typescript
function useBrowserPointerItemDrag(
options: UseBrowserPointerItemDragOptions,
): {
onItemPointerDown: (id: string, event: PointerEventLike) => void
consumeClickBlock: () => boolean
}参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
draggingIds | Ref<string[]> | 是 | 当前正在拖拽的 id 列表 |
getSelectedIds | () => string[] | 是 | 读取当前选区 |
setSelection | (ids: string[]) => void | 否 | 非加选时更新选区 |
dragThresholdPx | number | 否 | 激活拖拽的最小位移,默认 4 |
resolveFolderDropTarget | function | 否 | 指针位置解析文件夹落点 id |
onDragDelta | function | 否 | 越过阈值后每次 move 回调 |
onDropOntoFolder | function | 否 | 松手落到文件夹时触发 |
onDragEndWithoutFolder | function | 否 | 拖动但未落到文件夹时触发 |
返回值
| 属性 | 类型 | 说明 |
|---|---|---|
onItemPointerDown | function | 绑定到可拖拽项的 pointerdown |
consumeClickBlock | function | 拖拽结束后吞掉一次 click,避免误触 |
工作原理
- pointerdown:左键记录 origin;若当前 id 不在选区且非 Ctrl/Meta 加选,则先
setSelection([id])。 - 阈值:
pointermove中hypot(dx,dy) >= threshold后才设置draggingIds并setPointerCapture。 - 跟手:每次 move 调用
onDragDelta,传入相对 origin 的dx/dy;可选更新dropTargetFolderId。 - pointerup:有文件夹落点则
onDropOntoFolder;否则onDragEndWithoutFolder;最后清理 document 监听与 body class。