html - 怎么做可调整大小？

Question

有没有办法<div>通过拖放来调整容器的大小？

Answer 1

最好的方法是使用 CSS3。它至少受到 Webkit 和 Gecko 的支持。

根据w3c 规范：

div.my_class {
    resize:both;
    overflow:auto; /* something other than visible */
}

Webkit 和 Firefox 不会以相同的方式解释规范。在 Webkit 中，大小仅限于设置的宽度和高度。还有另一个问题：如何使用 CSS 使元素的尺寸调整为小于初始尺寸？关于这个。

Answer 2

div {
  border: 1px solid black;
}

.resizable-content {
  min-height: 30px;
  min-width: 30px;
  resize: both;
  overflow: auto;
  max-height: fit-content;
  max-width: fit-content;
}

<div class="resizable-content">Resize Me!</div>

Answer 3

CSS3-only 方法的问题是只有 div 的右下角变成可拖动的。在尝试通过从 Stack Overflow 复制代码片段来尝试做到这一点之后，我强烈建议在您的项目中使用优秀的InteractJS JavaScript 库。它允许您轻松创建一个可调整大小（和可拖动）的 div，该 div 可以从各个方面调整大小。

Answer 4

如果您需要为mustberesizeable tags数组中的每个标签（也是 <div>）执行一些函数doOnResize(tag)，您可以简单地将这个数组复制到window的一个：

window[WIN_RESIZED] = [] // init the window's array
for (var i in tags) {      
  window[WIN_RESIZED].push(tags[i])
}

在那之后

window.addEventListener('resize', function(e){
  for (var i in window[WIN_RESIZED]) {
    doOnResize(window[WIN_RESIZED][i])
  }
})

必须写在开头的某个地方

const WIN_RESIZED = 'move_resized_divs'

具有任意名称，例如“ move_resized_divs ”