第一步：创建一个小盒子，绝对定位一下。

 <style>
        .box{
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: red;
        }
     
</style>
<body>
<div class="box"></div>
</body>

第二步：实现思路：

实现思路：

1.获取鼠标按下时的位置，获取元素的初始位置

2.添加鼠标移动的事件监听，获取鼠标当前位置

3.计算鼠标移动距离

4.用鼠标移动距离+元素的初始位置 = 元素的当前位置

5.修改元素的位置，就跟着鼠标移动了！

6.当然到了这一步会发现，我们松开鼠标之后，小盒子还是跟着鼠标指针跑。因此这里的关键步骤是取消事件监听。

7.添加鼠标抬起事件，在松开鼠标之后，取消鼠标移动和鼠标抬起的事件监听~

第三步：开始敲代码：（备注里的数字对应第二步的实现思路的步骤）

<script>
    let box = document.querySelector(".box");//1.这里获取的是你要移动的元素
    let startMouse = {};
    let startPos = {};
    box.addEventListener("mousedown",function (e) {//2.添加鼠标按下事件监听
        startMouse = {//鼠标初始位置
            x:e.clientX,
            y:e.clientY
        }
        startPos = {//元素初始位置
            x:box.getBoundingClientRect().left,
            y:box.getBoundingClientRect().top
        };
        e.preventDefault();
        document.addEventListener("mousemove",move);//添加鼠标移动事件监听
        document.addEventListener("mouseup",up);//添加鼠标抬起事件监听
    })

    function move(e) {
        let nowMouse = {//2.获取鼠标移动时的当前位置
            x:e.clientX,
            y:e.clientY
        }
        let disMouse = {//3.计算鼠标移动距离
            x:nowMouse.x - startMouse.x,
            y:nowMouse.y - startMouse.y
        }
        let nowPosition = {//4.计算出元素应该在的位置
            x:startPos.x + disMouse.x,
            y:startPos.y + disMouse.y
        }
        box.style.left = nowPosition.x+"px";//5.修改元素位置
        box.style.top = nowPosition.y+"px";
    }
    function up() {//6.7.取消事件监听
        document.removeEventListener("mousemove",move);
        document.removeEventListener("mouseup",up);
    }


</script>

2. 用【js】原生代码实现【元素拖拽】so easy

第一步：创建一个小盒子，绝对定位一下。

第二步：实现思路：

第三步：开始敲代码：（备注里的数字对应第二步的实现思路的步骤）

猜你喜欢