可拖曳的div

实现 div 随着鼠标的拖动而移动

思路

鼠标按下时记录偏移量，当鼠标移动时计算新的偏移量与原始坐标相减计算出移动距离，使用transform调整 div 位置

代码

<div class="drag-element"></div>

.drag-element { 
    background-color: rgb(246, 69, 69);
    width: 100px;
    height: 100px;
    transform: translate(0, 0); 
    transition: transform 0.2s ease-in-out; 
}

    const dragElement = document.querySelector('.drag-element');
    let offsetX, offsetY;

    // 鼠标按下时记录起始位置
    dragElement.addEventListener('mousedown', (e) => {
      e.preventDefault();
      offsetX = dragElement.offsetLeft;
      offsetY = dragElement.offsetTop;
    });

    // 鼠标移动时更新位置
    document.addEventListener('mousemove', (e) => {
      e.preventDefault();
      if (offsetX !== undefined && offsetY !== undefined) {
        const translateX = e.clientX - offsetX - 50;
        const translateY = e.clientY - offsetY - 50;
        dragElement.style.transform = `translate(${translateX}px, ${translateY}px)`;
      }
    });

    // 鼠标松开时清除记录
    document.addEventListener('mouseup', e => {
      offsetX = undefined;
      offsetY = undefined;
    })

transform每次移动是相对于原始位置所进行，所以只需要记录鼠标点在div中的相对位置。

注意以下几点：

注意监听范围，不能只监听 div

不要使用 drag 事件，很难用。

使用 transform 会比 top / left 性能更好，因为可以避免 reflow 和 repaint