假设我们想对下面这个元素进行拖拽

<div id="dragMe" class="draggable">Drag me</div>

修改CSS

.draggable {
    /* 鼠标经过时指明该元素可以拖拽 */
    cursor: move;

    /* 拖拽元素的位置时绝对定位 */
    position: absolute;

    /* 不允许选择到元素里面的内容 */
    user-select: none;
}

为了让其可以被拖拽，我们需要处理三个事件

• 在元素上的mousedown事件 - 跟踪鼠标的位置
• 在document上的mousemove事件 - 计算鼠标移动的距离从而决定元素最终的位置
• 在document上的mouseup事件 - 销毁document上的事件

// 鼠标的当前位置
let x = 0;
let y = 0;

// 找到要拖拽的元素
const ele = document.getElementById('dragMe');

// 处理鼠标按下事件
// 用户拖拽时触发
const mouseDownHandler = function(e) {
    // 获取到鼠标位置
    x = e.clientX;
    y = e.clientY;
    
    // 对document增加监听鼠标移动事件和鼠标松开事件
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
};

const mouseMoveHandler = function(e) {
    // 鼠标移动的距离
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    // 设置元素的位置
    ele.style.top = `${ele.offsetTop + dy}px`; 
    ele.style.left = `${ele.offsetLeft + dx}px`;

    // 重新分配鼠标的坐标
    x = e.clientX;
    y = e.clientY;
};

const mouseUpHandler = function() {
    // 取消对document对象的事件监听
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
};

ele.addEventListener('mousedown', mouseDownHandler);

可以我们的元素可以被自由的拖拽了