制作一个可拖动的元素

假设我们想把下面的元素变成可拖动元素，为了使其可拖动，我们需要处理三个事件：

mousedown在元素上：跟踪鼠标的当前位置
mousemoveon document: 计算鼠标移动了多远，判断元素的位置
mouseupon document: 删除的事件处理程序document

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="dragMe" class="draggable">Drag me</div>
</body>
<script>
    // 鼠标的当前位置
    let x = 0;
    let y = 0;

    // 查询元素
    const ele = document.getElementById('dragMe');


    // 鼠标开始拖动
    const mouseDownHandler = function (e) {
        console.log('鼠标开始拖动');
        // Get the current mouse position
        x = e.clientX;
        y = e.clientY;
        // 触发 mousemove和 mousemove事件
        document.addEventListener('mousemove', mouseMoveHandler);
        document.addEventListener('mouseup', mouseUpHandler);
    };

    // 鼠标拖动中
    const mouseMoveHandler = function (e) {
        console.log('鼠标拖动中');
        // 鼠标移动了多远
        const dx = e.clientX - x;
        const dy = e.clientY - y;

        // Set the position of element
        ele.style.left = `${ele.offsetLeft + dx}px`;
        ele.style.top = `${ele.offsetTop + dy}px`;

        // Reassign the position of mouse
        x = e.clientX;
        y = e.clientY;
    };

    // 鼠标结束拖动
    const mouseUpHandler = function () {
        console.log('鼠标结束拖动');
        // 删除“mousemove”和“mouseup”的处理程序`
        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
    };

    ele.addEventListener('mousedown', mouseDownHandler);
</script>

<style>
    .draggable {
        cursor: move;
        position: absolute;
        user-select: none;
        align-items: center;
        display: flex;
        justify-content: center;
        border: 1px solid #cbd5e0;
        height: 8rem;
        width: 8rem;
    }
</style>

</html>

js原生实现拖拽功能

制作一个可拖动的元素