react-draggable icon indicating copy to clipboard operation
react-draggable copied to clipboard

can I apply react-draggable and react-resizable on a div at the same time?

Open jjzjx118 opened this issue 3 years ago • 3 comments

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>

jjzjx118 avatar May 07 '21 07:05 jjzjx118

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

zkwsk avatar May 12 '21 22:05 zkwsk

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

IbrahimSam96 avatar May 31 '21 21:05 IbrahimSam96

There is a package that handles alot of this automatically called react-rnd you can see here

UserJHansen avatar Jan 03 '22 04:01 UserJHansen