使<div>可调整大小</div>

Question

有没有办法制作一个＆lt; div＆gt;容器可以通过拖放调整大小？这样用户可以使用拖放来改变它的大小？

真的很感激任何帮助！

Answer 1

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

根据w3c spec：

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

Webkit和Firefox不会以相同的方式解释规范。在Webkit中，大小仅限于设置的宽度和高度。还有一个问题：How can I use CSS to make an element resizable to a dimension smaller than the initial one?关于此问题。

Answer 2

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

Answer 3

如果您需要为必须具有可识别性的数组中的每个标记（也是＆lt; div＆gt;）执行某些功能 doOnResize（tag） > 标签，你可以简单地将这个数组复制到 window 的一个：

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

之后

const WIN_RESIZED = 'move_resized_divs'

开头的某些人必须写在哪里

{{1}}

使用任意名称，例如' move_resized_divs '

Answer 4

最好使用jQuery UI插件，它更灵活，我们可以在任何html标签的右边缘和下边缘拖动

position: relative;

Answer 5

仅CSS3方法的问题在于，只有div的右下角可拖动。在尝试通过从Stack Overflow复制代码片段来做到这一点后，我强烈建议仅在项目中使用出色的InteractJS JavaScript library。它使您可以轻松创建可调整大小（并且可拖动）的div，并可以从各个方向进行调整。