用鼠标调整Div的大小会过快

Question

为了好玩，我正在创建一个可切换为使用垂直输入的小部件（例如日语）。 垂直部分被用一个div是做contenteditable 。 目前，您可以同时看到textarea和div，并观看它们的内容同步变化。 该复选框尚未执行任何操作。

我的问题是，作为“句柄”进行拖动和调整大小的svg位于可编辑的div内，如果用户从div剪切或粘贴到div上，这将变得一团糟。 所以这是我要解决的真正问题，如果有更好的解决方法，请告诉我。 为了解决此问题，我将可编辑div放在具有svg的另一个div中，以使内部可编辑div不会影响它。

执行此操作后，调整大小功能将无法正常工作。 向下点击手柄后，div向下调整的速度非常快（高度不断增加）。

这是我试图做的“工作”： 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是一项昂贵的计算，可能会对性能产生负面影响。

更新：添加了分叉的JSFiddle https://jsfiddle.net/csoh7xzv/