使<div>可调整大小

Question

有没有办法让drag'n'drop可以调整<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 方法的问题在于，只有 div 的右下角可以拖动。用户几乎肯定会想要从任何边框调整 div 的大小，而不仅仅是右下角。

在浪费了大量时间尝试通过从 Stack Overflow 复制代码片段来完成此任务之后，我强烈建议您在项目中使用优秀的InteractJS JavaScript 库。它允许您轻松创建可调整大小（且可拖动）的 div，并且可以从各个方向调整大小。