react-draggable
react-draggable copied to clipboard
can I apply react-draggable and react-resizable on a div at the same time?
if I want a div can be draggable and resizable at the same time. Can I do this ? :
<Draggable>
<ResizableBox width={200} height={200} draggableOpts={{...}}
minConstraints={[100, 100]} maxConstraints={[300, 300]}>
<span>Contents</span>
</ResizableBox>
</Draggable>
I was struggling a bit with this as well. The key for me was to add a cancel
prop. I have a small prototype you can check out here: https://codesandbox.io/s/react-resizable-react-draggable-zue38
Still not sure how to persist location of Draggable after re-renders. Check out my question on https://stackoverflow.com/questions/67775912/react-draggable-save-position-of-element-after-re-render
There is a package that handles alot of this automatically called react-rnd you can see here