Open hututuhu opened 1 year ago
Yes, I also encountered this problem. Do you have the solution now? Thank you. @hututuhu
Hello @tinyRipple and @hututuhu , I have a solution to your problem. Please add bounds={bounds} into the Draggable and ref={dragRef} into the main draggable div like
Check https://github.com/hardik79/react-draggable/blob/main/src/App.js solution example for your problem.
Yes, I also encountered this problem. Do you have the solution now? Thank you. @hututuhu
I solve this problem by using onStop and position.
Check https://github.com/hardik79/react-draggable/blob/main/src/App.js solution example for your problem.
Setting the computed bounds works well, thanks for the tip 👍
I think we can manage without a useEffect
and rely on the onStart
prop to recompute the bounds whenever the users want to start dragging. I just used this strategy to solve similar issue to limit the bounds of a draggable Mui modal.
function App() {
const [bounds, setBounds] = useState({});
const contentRef = useRef(null);
function updateBounds() {
if (contentRef.current !== null) {
setBounds({
left: ...,
top: ...,
right: ...,
bottom: ..., // Whatever computation works in your case based on contentRef.current
});
}
return (
<Draggable bounds={bounds} onStart={updateBounds}>
<YourComponent ref={contentRef} />
</Draggable>
);
}