javascript - How to create handles on each side of a div for resizing? - (NO jquery) - Stack Overflow

admin管理员组

文章数量:1279182

Using pure javascript HTML5 and CSS3 (NOT jQuery)

I want to do something like this image, I have HTML elements inside the div, like for example a text area or text box, when user clicks on the container div I want the handles and border to show up. THe user should resize the container only using the handles.

How can I acplish this? I know how to do the events and resize, but not sure how to specifically create the handles and resize only on those points.

Are the handles a CSS trick? or do I have to create a graphic for the container (like a background image on the resizable div container?)

Using pure javascript HTML5 and CSS3 (NOT jQuery)

I want to do something like this image, I have HTML elements inside the div, like for example a text area or text box, when user clicks on the container div I want the handles and border to show up. THe user should resize the container only using the handles.

How can I acplish this? I know how to do the events and resize, but not sure how to specifically create the handles and resize only on those points.

Are the handles a CSS trick? or do I have to create a graphic for the container (like a background image on the resizable div container?)

• javascript
• html
• css

Share Improve this question Follow edited Jun 14, 2016 at 17:39 sjs asked Jun 14, 2016 at 17:07 sjssjs 47211 gold badge55 silver badges1515 bronze badges 9

• I want to do ... show what you have tried ... – DaniP Commented Jun 14, 2016 at 17:09
• @DaniP uh, I don't know where to start? everything I found was in jQuery, alternatively I found the way to add standard bottom right hand corner resize handle using css but that's not what I want. – sjs Commented Jun 14, 2016 at 17:15
• 2 I think that you can find the answer of this question here – Dlanor Commented Jun 14, 2016 at 17:16
• What you can do is add a container that provides those points as separate elements, and then bind the events you already know to each point. – DaniP Commented Jun 14, 2016 at 17:19
• 3 It can be CSS .. jsfiddle/0sgun0dr/1 – DaniP Commented Jun 14, 2016 at 17:34

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 8

First you can use CSS like this:

div {
    resize: both;
    overflow: auto;
}

(http://www.w3schools./cssref/css3_pr_resize.asp);

At this post was a good Javascript example: (How to make HTML element resizable using pure Javascript?)

JS Example:

• https://github./anhr/resizer

本文标签： javascriptHow to create handles on each side of a div for resizing(NO jquery)Stack Overflow