Resize
ES Drager provides resize functionality through draggable handles on the edges and corners of the element. This allows for intuitive resizing of elements while maintaining aspect ratio or freely adjusting dimensions.
Basic Usage
To enable resizing, simply add the resizable prop to your Drager component:
<Drager
className="w-32 h-32 bg-blue-500"
resizable
>
Resizable content
</Drager>
Try resizing!
Resize Handles
When resizable is enabled, eight resize handles appear:
- Four corner handles (top-left, top-right, bottom-left, bottom-right)
- Four edge handles (top, right, bottom, left)
Combining with Other Features
Resize functionality can be combined with other features like rotation, scaling, and connections:
<Drager
className="w-32 h-32 bg-blue-500"
resizable
rotatable
scalable
>
Multi-feature element
</Drager>
Try all features!