JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

JavaScript实现拖拽元素对齐到网格需要分为以下步骤：

第一步：获取元素

在JavaScript中通过id获取被拖拽元素和网格元素。

const dragElem = document.getElementById("drag-elem"); // 被拖拽元素
const gridElem = document.getElementById("grid-elem"); //网格元素

第二步：实现拖拽

在起始拖拽事件中，监听鼠标的移动事件。通过计算鼠标移动距离，在mousemove事件中实现被拖拽元素跟随鼠标移动。

dragElem.addEventListener("dragstart", function(e) {
    // 记录鼠标起始位置
    this.startX = e.clientX - this.offsetLeft;
    this.startY = e.clientY - this.offsetTop;
});

dragElem.addEventListener("dragover", function(e) {
    e.preventDefault();
});

dragElem.addEventListener("drag", function(e) {
    // 计算鼠标移动距离
    const moveX = e.clientX - this.startX;
    const moveY = e.clientY - this.startY;
    this.style.left = moveX + "px";
    this.style.top = moveY + "px";
});

第三步：对齐到网格

当拖拽元素移动到网格范围内时，实现拖拽元素每次移动固定距离，并且对齐到网格。

dragElem.addEventListener("dragend", function(e) {
    // 计算网格范围
    const gridLeft = gridElem.offsetLeft;
    const gridRight = gridElem.offsetLeft + gridElem.offsetWidth;
    const gridTop = gridElem.offsetTop;
    const gridBottom = gridElem.offsetTop + gridElem.offsetHeight;
    // 计算拖拽元素当前位置
    const dragLeft = this.offsetLeft;
    const dragRight = this.offsetLeft + this.offsetWidth;
    const dragTop = this.offsetTop;
    const dragBottom = this.offsetTop + this.offsetHeight;
    // 计算网格间距
    const gridSpace = 20;
    // 计算需要移动的距离
    let moveX, moveY;
    if (dragLeft <= gridLeft) {
        moveX = -dragLeft % gridSpace;
    } else if (dragRight >= gridRight) {
        moveX = gridSpace - (dragRight - gridLeft) % gridSpace;
    } else {
        moveX = 0;
    }
    if (dragTop <= gridTop) {
        moveY = -dragTop % gridSpace;
    } else if (dragBottom >= gridBottom) {
        moveY = gridSpace - (dragBottom - gridTop) % gridSpace;
    } else {
        moveY = 0;
    }
    // 实现对齐到网格
    this.style.left = this.offsetLeft + moveX + "px";
    this.style.top = this.offsetTop + moveY + "px";
});

示例说明一

假设网格元素宽度为400px，高度为300px，网格间距为20px。被拖拽元素大小为100px * 100px。

拖拽元素在起始位置时，距离网格左边界为50px，距离网格右边界为150px，距离网格上边界为80px，距离网格下边界为180px。此时元素不在网格范围内，不需要进行对齐操作。

当将拖拽元素向左移动30px，距离网格左边界为20px，距离网格右边界为120px，距离网格上边界为70px，距离网格下边界为170px。此时拖拽元素距离网格左边界不足一个网格间距，并需要向右移动10px才能对齐到网格，距离网格上边界同理，需要向下移动10px才能对齐到网格。

因此实现对齐到网格需要将拖拽元素向右移动10px，向下移动10px。

示例说明二

假设网格元素宽度为600px，高度为400px，网格间距为30px。被拖拽元素大小为150px * 150px。

拖拽元素在起始位置时，距离网格左边界为70px，距离网格右边界为220px，距离网格上边界为80px，距离网格下边界为230px。此时元素不在网格范围内，不需要进行对齐操作。

当将拖拽元素向右移动180px，距离网格左边界为250px，距离网格右边界为400px，距离网格上边界为110px，距离网格下边界为260px。此时拖拽元素距离网格右边界不足一个网格间距，并需要向左移动20px才能对齐到网格，距离网格下边界同理，需要向上移动10px才能对齐到网格。

因此实现对齐到网格需要将拖拽元素向左移动20px，向上移动10px。