A toolkit for React to create draggable elements.
npm install draggable-uiA toolkit for React to create draggable elements.
#### Installation
```
npm i draggable-ui
The useDraggable hook is a custom React hook designed to add draggable functionality to any component. It provides an interface to track and manage drag events, including the start, movement, and end of a drag operation.
#### Example
`typescript
export type DragEventData = {
/* Total distance traveled along the X axis. /
deltaX: number;
/* Total distance traveled along the Y axis. /
deltaY: number;
/* Change in the X coordinate compared to the previous value. /
moveX: number;
/* Change in the Y coordinate compared to the previous value. /
moveY: number;
/* X and Y coordinates for mouse and touch events. /
coords: Coordinates;
/* Pointer event associated with the movement. /
event: PointerEvent;
};
import { useState } from "react";
import { useDraggable, Coordinates } from "draggable-ui";
const BasicExample = () => {
const [pos, setPos] = useState
const [dragging, setDragging] = useState(false);
const { listeners } = useDraggable({
onStart: () => {
setDragging(true);
},
onMove: ({ moveX, moveY }) => {
setPos((prev) => ({ x: prev.x + moveX, y: prev.y + moveY }));
},
onEnd: () => {
setDragging(false);
},
});
return (
,
}}
>
{dragging ? "..." : " Drag Me!"}