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";
});