Skip to content

Instantly share code, notes, and snippets.

@DimitryDushkin
Last active December 11, 2020 11:24
Show Gist options
  • Save DimitryDushkin/1eaaa28e6b95b1e2f0bdee74415d5798 to your computer and use it in GitHub Desktop.
Save DimitryDushkin/1eaaa28e6b95b1e2f0bdee74415d5798 to your computer and use it in GitHub Desktop.
function DraggableComponent() {
const draggableDivRef = useRef<HTMLDivElement>();
const drag$ = useDraggable(draggableDivRef);
useEffect(() => {
if (!drag$.current) {
return () => {};
}
const dragSubscription = drag$.current.subscribe(e => {
if (!draggableDivRef.current) {
return;
}
draggableDivRef.current.style.transform = `translateY(${e.y}px)`;
});
return () => {
dragSubscription.unsubscribe();
};
}, [drag$]);
return (
<div
ref={draggableDivRef}
touch-action="none"
style={{ userSelect: "none", padding: "8px", backgroundColor: "#eee" }}
>
drag me
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment