Html 使 <div> 可调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/391440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make <div> resizeable
提问by Chris
Is there a way to make a <div> container resizeable with drag'n'drop? So that the user can change the size of it using drag'n'drop?
有没有办法通过拖放操作使 <div> 容器可调整大小？以便用户可以使用拖放来更改它的大小？
Any help would really be appreciated!
任何帮助将不胜感激！
回答by Georg Sch?lly
The best method would be to use CSS3. It supported by at least Webkit and Gecko.
最好的方法是使用 CSS3。它至少得到 Webkit 和 Gecko 的支持。
According to the w3c spec:
根据w3c 规范：
div.my_class {
resize:both;
overflow:auto; /* something other than visible */
}
Webkit and Firefox do not interpret the specs the same way. In Webkit the size is limited to the width and height set. There's another question: How can I use CSS to make an element resizable to a dimension smaller than the initial one?concerning this.
Webkit 和 Firefox 不会以相同的方式解释规范。在 Webkit 中，大小受限于宽度和高度设置。还有一个问题：如何使用 CSS 将元素的大小调整为小于初始尺寸的尺寸？关于这一点。
回答by sushmitha shenoy
.resizable-content {
min-height: 30px;
min-width: 30px;
resize: both;
overflow: auto;
max-height: fit-content;
max-width: fit-content;
}
回答by James
The problem with the CSS3-only method is that only the bottom-right hand corner of the div becomes draggable. After going down the rabbit hole of trying to do this via copying code-snippets from Stack Overflow, I would highly recommend just using the excellent InteractJS JavaScript libraryin your project. It allows to you easily create a resizable (and draggable) div that can be resized from all sides.
CSS3-only 方法的问题是只有 div 的右下角可以拖动。在尝试通过从 Stack Overflow 复制代码片段来尝试做到这一点之后，我强烈建议在您的项目中使用优秀的InteractJS JavaScript 库。它允许您轻松创建一个可以从各个方向调整大小的可调整大小（和可拖动）的 div。
回答by Gopala raja naika
回答by Leon Rom
if you need to execute some function doOnResize(tag)for every tag (also the <div>) among the array of mustberesizeabletags, you could simple copy this array to window's one:
如果你需要执行一些功能doOnResize（标签），为每一个标签（也<DIV>）的阵列中mustberesizeable标签，你可以简单的复制这个数组窗口的一个：
window[WIN_RESIZED] = [] // init the window's array
for (var i in tags) {
window[WIN_RESIZED].push(tags[i])
}
and after that set
在那之后
window.addEventListener('resize', function(e){
for (var i in window[WIN_RESIZED]) {
doOnResize(window[WIN_RESIZED][i])
}
})
where somewehere in the beginning must be written
必须写在开头的某个地方
const WIN_RESIZED = 'move_resized_divs'
with arbitrary name like 'move_resized_divs'
具有任意名称，如“ move_resized_divs”
