search

react-grid-layout / react-draggable

React draggable component
MIT License
9.01k stars 1.02k forks source link

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

Open jjzjx118 opened 3 years ago

jjzjx118 commented 3 years ago

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>
zkwsk commented 3 years ago

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

IbrahimSam96 commented 3 years ago

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

UserJHansen commented 2 years ago

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