js通过八个点 拖动改变div大小的实现方法

在JavaScript中，通过拖动来改变一个`div`元素的大小，你可以监听鼠标事件（如`mousedown`, `mousemove`, `mouseup`）来实现。以下是一个简化的实现方法，使用八个点（通常是每个角的四个点和每条边的中点）来改变`div`的大小。这里，为了简化，我将展示如何通过拖动`div`的右下角来改变其大小。

首先，HTML部分，你有一个`div`元素和一个可能用于显示边界的可选元素（可选）：

<div id="resizable" style="width: 100px; height: 100px; background-color: lightblue; position: relative;">
    <!-- 可选: 显示右下角的拖动点 -->
    <div id="resizeHandle" style="width: 10px; height: 10px; background-color: red; position: absolute; bottom: 0; right: 0; cursor: se-resize;"></div>
</div>

然后，JavaScript部分，实现拖动来改变大小：

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

const resizableDiv = document.getElementById('resizable');
const resizeHandle = document.getElementById('resizeHandle');

resizeHandle.addEventListener('mousedown', function(e) {
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(window.getComputedStyle(resizableDiv).width, 10);
    startHeight = parseInt(window.getComputedStyle(resizableDiv).height, 10);

    // 阻止默认事件和冒泡
    e.preventDefault();
    e.stopPropagation();
});

document.addEventListener('mousemove', function(e) {
    if (!isDragging) return;

    let newWidth = startWidth + (e.clientX - startX);
    let newHeight = startHeight + (e.clientY - startY);

    // 确保尺寸不会太小
    newWidth = Math.max(newWidth, 10); // 最小宽度
    newHeight = Math.max(newHeight, 10); // 最小高度

    resizableDiv.style.width = `${newWidth}px`;
    resizableDiv.style.height = `${newHeight}px`;

    // 更新起始坐标以继续拖动
    startX = e.clientX;
    startY = e.clientY;
});

document.addEventListener('mouseup', function() {
    isDragging = false;
});

这段代码实现了通过拖动`div`的右下角（由`resizeHandle`元素表示）来改变`div`的大小。它监听了`mousedown`来开始拖动，`mousemove`来更新`div`的尺寸，以及`mouseup`来停止拖动。注意，这里使用了`e.clientX`和`e.clientY`来获取鼠标位置，并使用`window.getComputedStyle`来获取当前的`div`尺寸。

你可以通过添加更多的`resizeHandle`元素和调整`mousedown`、`mousemove`和`mouseup`的事件监听器来支持其他七个点的拖动。不过，那将需要更多的代码来管理不同的拖动方向和可能的冲突。