useDrag

Overview

A pair of hooks to help you manage data transfer between drag and drop

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useDrag.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useDrag.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useDrag.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useDrag.json

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

Property	Description	Type	Default
data	Drag data	`any`	-
target	DOM element or ref	`() => Element` \| `Element` \| `MutableRefObject<Element>`	-
options	More config	`DragOptions`	-

Property	Description	Type	Default
onDragStart	On drag start callback	`(e: React.DragEvent) => void`	-
onDragEnd	On drag end callback	`(e: React.DragEvent) => void`	-
dragImage	Customize image that follow the mouse pointer during dragging	`DragImageOptions`	-

参数	说明	类型	默认值
image	An image Element element to use for the drag feedback image. The image will typically be an `<img>` element but it can also be a `<canvas>` or any other visible element	`string \| Element`	-
offsetX	the horizontal offset within the image	`number`	0
offsetY	the vertical offset within the image	`number`	0