useDrop & useDrag

处理元素拖拽的 Hook。

useDrop 可以单独使用来接收文件、文字和网址的拖拽。
useDrag 允许一个 DOM 节点被拖拽，需要配合 useDrop 使用。
向节点内触发粘贴动作也会被视为拖拽。

代码演示

useDrag<T>(
  data: any,
  target: (() => Element) | Element | MutableRefObject<Element>,
  options?: DragOptions
);

useDrag<T>(
  data: any,
  target: (() => Element) | Element | MutableRefObject<Element>,
  options?: DragOptions
);

参数	说明	类型	默认值
data	拖拽的内容	`any`	-
target	DOM 节点或者 Ref 对象	`() => Element` \| `Element` \| `MutableRefObject<Element>`	-
options	额外的配置项	`DragOptions`	-

参数	说明	类型	默认值
onDragStart	开始拖拽的回调	`(e: DragEvent) => void`	-
onDragEnd	结束拖拽的回调	`(e: DragEvent) => void`	-

useDrop<T>(
  target: (() => Element) | Element | MutableRefObject<Element>,
  options?: DropOptions
);

useDrop<T>(
  target: (() => Element) | Element | MutableRefObject<Element>,
  options?: DropOptions
);

参数	说明	类型	默认值
target	DOM 节点或者 Ref 对象	`() => Element` \| `Element` \| `MutableRefObject<Element>`	-
options	额外的配置项	`DragOptions`	-