Draggable Example

Create draggable button with React.

import { store, draggable } from "@dflex/dnd";
let dflexDraggable: Draggable;
const id = "DFlex-draggable-btn";
const DraggableButton = () => {
const ref = React.createRef() as React.MutableRefObject<HTMLButtonElement>;
React.useEffect(() => {
if (ref.current) {
store.register(id);
}
return () => {
store.unregister(id);
};
}, [ref]);
const onMouseMove = (e: MouseEvent) => {
if (dflexDraggable) {
const { clientX, clientY } = e;
// Drag when mouse is moving!
dflexDraggable.dragAt(clientX, clientY);
}
};
const onMouseUp = () => {
if (dflexDraggable) {
dflexDraggable.endDragging();
document.removeEventListener("mouseup", onMouseUp);
document.removeEventListener("mousemove", onMouseMove);
}
};
const onMouseDown = (e: React.MouseEvent) => {
const { button, clientX, clientY } = e;
// Avoid right mouse click and ensure id
if (typeof button === "number" && button === 0) {
if (id) {
dflexDraggable = new Draggable(id, { x: clientX, y: clientY });
document.addEventListener("mouseup", onMouseUp);
document.addEventListener("mousemove", onMouseMove);
}
}
};
return (
<button
type="button"
ref={ref}
key={id}
id={id}
onMouseDown={onMouseDown}
>
Drag me!
</button>
);
};