Div 用鼠标调整大小扩展太快

Question

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

我的问题是要拖动和调整大小的 "handle" svg 位于可编辑的 div 内，如果用户剪切或粘贴，这将变得混乱进入div。这就是我要解决的真正问题，如果有更好的解决方法，请告诉我。为了解决这个问题，我将可编辑的 div 放在另一个具有 svg 的 div 中，以便内部可编辑的 div 不会影响它。

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

这是我试图做的 "working"：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/

Div 用鼠标调整大小扩展太快

Div resizing with mouse expands too fast

html

javascript

css

resize