- Approach 1. resize CSS property
- Approach 2. Drag and Drop API
- Approach 3. Mouse Events
- Approach N. third-party libraries
- Refs
Approach 1. resize CSS property
The resize CSS property sets whether an element is resizable, and if so, in which directions.
resize does not apply to the following:
- Inline elements
- Block elements for which the
overflowproperty is set tovisible
The problem with the CSS3-only method is that only the bottom-right hand corner of the div becomes draggable.
Also note that IE does not support this property.
Approach 2. Drag and Drop API
Beside approach 1, we can also drag a sibling div and resize the div we are interested in.
- Set the
draggable="true"on the div that you wish to make draggable - Add a listener for the
dragstartevent - Resize the div in the
dragevent handler
Note:
- This demo works bad on IE.
Approach 3. Mouse Events
This is the best compatible approach.