鼠标拖动调整Div尺寸时扩张过快及可编辑Div拖拽手柄异常问题求助

嘿，我来帮你逐个解决这些前端开发里的小坑，咱们一步步来～

这种情况大多是因为你在监听mousemove事件时，没正确计算鼠标移动的相对差值，反而直接累加了过大的数值，或是没限制尺寸调整的步长。

给你一个实用的修复思路：

• 先在mousedown事件里记录初始鼠标位置，以及Div的初始宽高
• 在mousemove中，计算鼠标当前位置和初始位置的差值，用这个差值来更新Div的宽高，而非每次都加固定的大数值
• 还可以给尺寸设置最小/最大值，避免过度扩张

示例代码参考：

let isResizing = false;
let startX, startY, startWidth, startHeight;

const resizeHandle = document.querySelector('.resize-handle');
const editableDiv = document.querySelector('[contenteditable]');

resizeHandle.addEventListener('mousedown', (e) => {
  isResizing = true;
  startX = e.clientX;
  startY = e.clientY;
  startWidth = parseInt(getComputedStyle(editableDiv).width);
  startHeight = parseInt(getComputedStyle(editableDiv).height);
  
  document.addEventListener('mousemove', resizeDiv);
  document.addEventListener('mouseup', stopResize);
});

function resizeDiv(e) {
  if (!isResizing) return;
  // 用鼠标移动的差值更新尺寸，避免速度过快
  const widthDiff = e.clientX - startX;
  const heightDiff = e.clientY - startY;
  editableDiv.style.width = `${startWidth + widthDiff}px`;
  editableDiv.style.height = `${startHeight + heightDiff}px`;
}

function stopResize() {
  isResizing = false;
  document.removeEventListener('mousemove', resizeDiv);
  document.removeEventListener('mouseup', stopResize);
}

这个问题的根源很清晰：你把SVG手柄放在了contenteditable="true"的Div里面，它会被当成可编辑内容的一部分，用户的剪切、粘贴操作自然会干扰到它。

最直接的解决方案是把SVG手柄移到Div外面，用绝对定位让它附着在Div的角落，这样既不影响拖动功能，也不会被编辑操作波及：

<!-- 用父容器包裹Div和SVG手柄 -->
<div class="editor-container">
  <div contenteditable="true" class="editable-div">这里是可编辑内容</div>
  <svg class="resize-handle" viewBox="0 0 20 20">
    <!-- 你的SVG手柄路径 -->
    <path d="M10 0L20 10L10 20L0 10Z" fill="#ccc"/>
  </svg>
</div>

对应的CSS：

.editor-container {
  position: relative;
  display: inline-block; /* 让容器自适应Div大小 */
}

.editable-div {
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
  padding: 8px;
}

.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  /* 确保手柄在Div上方，不被遮挡 */
  z-index: 10;
}

调整后，SVG手柄完全独立于可编辑内容，剪切粘贴操作就不会再影响它了。

• textarea与Div内容同步：监听两者的input事件，互相同步内容即可：

  const textarea = document.querySelector('textarea');
  const editableDiv = document.querySelector('[contenteditable]');
  
  textarea.addEventListener('input', () => {
    editableDiv.textContent = textarea.value;
  });
  
  editableDiv.addEventListener('input', () => {
    textarea.value = editableDiv.textContent;
  });
  

• 复选框功能实现：监听复选框的change事件，切换textarea和Div的显示状态，或是切换Div的垂直输入模式：

  const toggleCheckbox = document.querySelector('#vertical-input-toggle');
  
  toggleCheckbox.addEventListener('change', (e) => {
    if (e.target.checked) {
      // 开启垂直输入模式
      editableDiv.style.writingMode = 'vertical-rl';
      textarea.style.display = 'none';
    } else {
      // 关闭垂直输入
      editableDiv.style.writingMode = 'horizontal-tb';
      textarea.style.display = 'block';
    }
  });
  

内容的提问来源于stack exchange，提问作者mbomb007