javascript - 如何在 div 的每一侧创建 handle 以调整大小？ -(没有 jquery)

Question

使用纯 javascript HTML5 和 CSS3(不是 jQuery)

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

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

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

Answer 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