js拖动改变div大小

基础概念

在JavaScript中实现拖动改变div大小的功能，通常涉及到以下几个基础概念：

事件监听：使用mousedown、mousemove和mouseup事件来跟踪用户的鼠标操作。
坐标获取：通过event.clientX和event.clientY获取鼠标在页面中的位置。
样式修改：动态修改div的宽度和高度属性。

类型与应用场景

固定边角拖动：通常在div的右下角设置一个可拖动的把手，用户拖动时改变div的大小。
任意边拖动：允许用户在div的四条边上任意位置进行拖动来调整大小。
多方向拖动：结合了固定边角和任意边的特点，可以在多个方向上调整大小。

应用场景包括但不限于：

自定义布局的仪表板。
可调整大小的图片查看器。
动态表单和数据展示区域。

示例代码

以下是一个简单的示例代码，展示了如何实现一个固定右下角拖动改变div大小的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag to Resize Div</title>
<style>
  #resizable {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .handle {
    width: 10px;
    height: 10px;
    background-color: blue;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
  }
</style>
</head>
<body>

<div id="resizable">
  <div class="handle"></div>
</div>

<script>
  let isResizing = false;
  const resizableDiv = document.getElementById('resizable');
  const handle = document.querySelector('.handle');

  handle.addEventListener('mousedown', (e) => {
    isResizing = true;
    document.body.style.userSelect = 'none';
  });

  window.addEventListener('mousemove', (e) => {
    if (!isResizing) return;
    const dx = e.clientX - resizableDiv.offsetLeft;
    const dy = e.clientY - resizableDiv.offsetTop;
    resizableDiv.style.width = `${dx}px`;
    resizableDiv.style.height = `${dy}px`;
  });

  window.addEventListener('mouseup', () => {
    isResizing = false;
    document.body.style.userSelect = '';
  });
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：拖动时页面滚动

原因：鼠标移动事件可能触发了页面的滚动。
解决方法：在mousemove事件中使用e.preventDefault()来阻止默认行为。

window.addEventListener('mousemove', (e) => {
  if (!isResizing) return;
  e.preventDefault();
  // ... 其他代码
});

问题2：拖动结束后尺寸跳动

原因：可能在mouseup事件中没有正确地重置状态或计算尺寸。
解决方法：确保在mouseup事件中准确计算并设置最终的尺寸。

window.addEventListener('mouseup', () => {
  if (!isResizing) return;
  isResizing = false;
  // 可以在这里添加代码来微调最终的尺寸
  document.body.style.userSelect = '';
});

通过以上方法，可以有效解决在实现拖动改变div大小功能时可能遇到的常见问题。