使用鼠标调整Div的速度过快

Question

为了好玩，我正在创建一个可以切换为使用垂直打字的小部件（例如日语）。垂直部分使用contenteditable的div完成。此刻，您可以看到textarea和div，并观看其内容同步更改。该复选框尚未执行任何操作。

我的问题是svg是＆＃34;句柄＆＃34;拖动和调整大小是在可编辑的div内部，如果用户剪切或粘贴到div中，这将搞砸。这就是我正在解决的真正问题，如果有更好的解决办法，请告诉我。为了解决这个问题，我将可编辑的div放在另一个具有svg的div中，以便内部可编辑的div不会影响它。

执行此操作后，调整大小功能无法正常工作。单击手柄后，div会向下调整速度非常快（它的高度增长）。

以下是我要做的事情＆＃34;工作＆＃34;：https://jsfiddle.net/m4Ljuzyn/167/

这是我稍微更改布局后调整大小的地方：https://jsfiddle.net/m4Ljuzyn/190/

我只使用纯JavaScript。

Answer 1

问题来自于offsetLeft和offsetTop相对于元素的父级的事实。您将该相对值与鼠标事件的clientX/Y值一起使用，并且会产生不需要的结果。

利用getBoundingClientRect获取mousemove处理程序中的正确坐标。

var bounds = verticalTextarea.getBoundingClientRect();

verticalTextarea.style.width = (evt.clientX - bounds.left) + "px";
verticalTextarea.style.height = (evt.clientY - bounds.top) + "px";

警告：getBoundingClientRect是一项昂贵的计算，可能会对性能产生负面影响。

更新：添加了Forked JSFiddle https://jsfiddle.net/csoh7xzv/