Skip to content

useBrowserPointerItemDrag

浏览器 pointer 拖拽 composable:阈值激活、多选规则、文件夹落点与跟手回调。

函数签名

typescript
function useBrowserPointerItemDrag(
  options: UseBrowserPointerItemDragOptions,
): {
  onItemPointerDown: (id: string, event: PointerEventLike) => void
  consumeClickBlock: () => boolean
}

参数

参数名类型必填说明
draggingIdsRef<string[]>当前正在拖拽的 id 列表
getSelectedIds() => string[]读取当前选区
setSelection(ids: string[]) => void非加选时更新选区
dragThresholdPxnumber激活拖拽的最小位移,默认 4
resolveFolderDropTargetfunction指针位置解析文件夹落点 id
onDragDeltafunction越过阈值后每次 move 回调
onDropOntoFolderfunction松手落到文件夹时触发
onDragEndWithoutFolderfunction拖动但未落到文件夹时触发

返回值

属性类型说明
onItemPointerDownfunction绑定到可拖拽项的 pointerdown
consumeClickBlockfunction拖拽结束后吞掉一次 click,避免误触

工作原理

  1. pointerdown:左键记录 origin;若当前 id 不在选区且非 Ctrl/Meta 加选,则先 setSelection([id])
  2. 阈值pointermovehypot(dx,dy) >= threshold 后才设置 draggingIdssetPointerCapture
  3. 跟手:每次 move 调用 onDragDelta,传入相对 origin 的 dx/dy;可选更新 dropTargetFolderId
  4. pointerup:有文件夹落点则 onDropOntoFolder;否则 onDragEndWithoutFolder;最后清理 document 监听与 body class。