如何让js鼠标拖动调整div大小呢？

在JavaScript中，实现鼠标拖动来调整div元素的大小通常涉及以下步骤：

创建HTML结构：首先需要一个div元素，并且通常还需要一个用于拖动的小的子元素（比如在div的右下角）。

CSS样式：给div和拖动的子元素设置适当的CSS样式。

JavaScript逻辑：

监听鼠标在拖动元素上的mousedown事件。
当检测到mousedown事件时，开始监听整个文档的mousemove事件。
在mousemove事件中，根据鼠标的移动更新div的大小。
监听鼠标的mouseup事件以停止调整大小。
下面是实现这个功能的一个基本示例：

Copy code
<div id="resizeable-div">
  <div id="resizer"></div>
</div>

CSS

#resizeable-div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  position: relative;
}

#resizer {
  width: 10px;
  height: 10px;
  background-color: darkblue;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}
JavaScript
javascript
Copy code
const resizeableDiv = document.getElementById('resizeable-div');
const resizer = document.getElementById('resizer');

resizer.addEventListener('mousedown', function(e) {
  e.preventDefault();
  window.addEventListener('mousemove', resize);
  window.addEventListener('mouseup', stopResize);
});

function resize(e) {
  resizeableDiv.style.width = e.clientX - resizeableDiv.getBoundingClientRect().left + 'px';
  resizeableDiv.style.height = e.clientY - resizeableDiv.getBoundingClientRect().top + 'px';
}

function stopResize() {
  window.removeEventListener('mousemove', resize);
  window.removeEventListener('mouseup', stopResize);
}

在这个例子中，当用户按下resizer并拖动时，它会根据鼠标的位置来调整resizeable-div的宽度和高度。一旦释放鼠标按钮，调整大小的操作就会停止。