javascript - 允许用户垂直调整 block 的大小并使其下方的所有内容向后/向前推

Question

本质上，我正在尝试构建一个“间隔” block 。这意味着用户可以拖动 block 的底部并将其向上或向下移动，并且它下面的所有内容都会调整大小。对于快速 MS 绘图，这就是我的意思

我必须要做的一个想法就是放置一个文本区域 block ，这实际上非常完美，完全符合我的需要 as shown here ，但它是一个文本区域...我只需要一个空 block ，可能有一个小边框，里面的文本在 block 中间用大字母写着“调整我的大小”。

如果有人有一个有效的方法来完成这个，我将不胜感激!

Answer 1

虽然 textarea block 几乎可以让您到达那里，但我认为您应该从头开始。

创建几个div

<div>Lorem ipsum<div>
<div>Lorem ipsum<div>
<div id="resize">Resize me!<div>
<div>Lorem ipsum<div>

在调整大小的 div 上创建一个事件监听器。 W3 MDN

当用户触发事件监听器时计算用户鼠标移动了多少

按该数量增加元素的高度。