如何在 div 的每一侧创建句柄以调整大小？ - （没有 jquery）答案

【问题标题】：How to create handles on each side of a div for resizing? - (NO jquery)如何在 div 的每一侧创建句柄以调整大小？ - （没有 jquery）
【发布时间】：2016-06-14 17:07:40
【问题描述】：

使用纯 javascript HTML5 和 CSS3（不是 jQuery）

我想做类似这张图片的事情，我在 div 中有 HTML 元素，例如文本区域或文本框，当用户单击容器 div 时，我希望显示句柄和边框。用户应仅使用手柄调整容器大小。

我怎样才能做到这一点？我知道如何进行事件和调整大小，但不确定如何专门创建句柄并仅在这些点上调整大小。

句柄是 CSS 技巧吗？还是我必须为容器创建一个图形（比如可调整大小的 div 容器上的背景图像？）

【问题讨论】：

我想做 ...展示你尝试过的...
@DaniP 呃，我不知道从哪里开始？我发现的一切都在 jQuery 中，或者我找到了使用 css 添加标准右下角调整大小句柄的方法，但这不是我想要的。
我想你可以找到这个问题的答案here
您可以添加一个容器，将这些点作为单独的元素提供，然后将您已经知道的事件绑定到每个点。
可以是 CSS .. jsfiddle.net/0sgun0dr/1

标签： javascript html css

【解决方案1】：

首先你可以像这样使用 CSS：

div {
    resize: both;
    overflow: auto;
}

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

这篇文章是一个很好的 Javascript 示例： (How to make HTML element resizable using pure Javascript?)

JS 示例：

https://github.com/anhr/resizer

【讨论】：