react-pre-hooksuseDragAndDrop
You can handle the user drag actions on a container element using this hook, and it can also handle the mobile touches.
Parameters
- the drag action handler function that takes the DragAction object as a parameter.
- and some drag options:
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the container element reference (default is window). |
Return Values
a ref object of the container element.
DragAction Object
| Name | Type | Description |
|---|---|---|
| type | String | the drag type which can be start, end, or moving. |
| clientX | Number | the x position. |
| clientY | Number | the y position. |
| initialX | Number | the initial x position. |
| initialY | Number | the initial y position. |
| target | Element | the current dragged element in the container. |
| event | Event | the MouseEvent or TouchEvent if you are using the touches property. |
Example Usage
tsx
import { useDragAndDrop } from 'react-pre-hooks';
export default function Example() {
const ref = useDragAndDrop(action => {
const target = action.target as HTMLSpanElement;
target.style.left = action.clientX + 'px';
target.style.top = action.clientY + 'px';
});
return (
<div ref={ref}>
<span>Drag me!</span>
</div>
);
}import { useDragAndDrop } from 'react-pre-hooks';
export default function Example() {
const ref = useDragAndDrop(action => {
const target = action.target as HTMLSpanElement;
target.style.left = action.clientX + 'px';
target.style.top = action.clientY + 'px';
});
return (
<div ref={ref}>
<span>Drag me!</span>
</div>
);
}