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. 阈值:pointermove 中 hypot(dx,dy) >= threshold 后才设置 draggingIds 并 setPointerCapture。
  3. 跟手:每次 move 调用 onDragDelta,传入相对 origin 的 dx/dy;可选更新 dropTargetFolderId。
  4. pointerup:有文件夹落点则 onDropOntoFolder;否则 onDragEndWithoutFolder;最后清理 document 监听与 body class。