案例效果：在屏幕中拖拽箱子

在工作中最近遇到点小的知识点，现在写出一个小demo，供需要的朋友来参考

实现效果：

---

首先看见需求我们不着急做，我们先来分析一下：

• 位置特点：拖到时，鼠标在盒子内的位置不变；盒子新的位置=新的鼠标位置-鼠标在盒子内的一开始位置；
  • 鼠标在盒子内的一开始位置 =鼠标的位置-盒子的位置（offsetLeft）
• 执行特点：先鼠标落下在盒子内，再在页面上进行移动，最后鼠标键弹起；完成一次拖到；开关思想
  • 鼠标落下之前，设置 开关 为 关的状态，状态：没有点击 flag = false;
  • 先鼠标落下在盒子内，状态：已经点击， flag= true;
  • 再在页面上进行移动
    • 条件判断：看你isClick 状态是否为点击：
      • true：移动计算；
      • false：不进行移动计算；
  • 最后鼠标键弹起：状态：恢复到没有点击， flag= false;

---

html部分：

<div class="p" id="box">

css部分：

* {
            margin: 0;
            padding: 0;
        }
        
        html {
            width: 100%;
        }
        
        body {
            width: 100%;
            height: 2000px;
        }
        
        .p {
            width: 600px;
            height: 300px;
            background-color: #ccc;
            overflow: hidden;
            position: absolute;
            top: 50px;
            left: 50px;
        }

//1.要获取DOM节点
    var box = document.querySelector("#box");

    //三个步骤
    //1.鼠标点下
    //谁点下？
    var x_start = 0;
    var y_start = 0;
    //我们需要有开关的思想 这个开关呢就是为了控制最后能停住在最后
    var flag = false;
    box.addEventListener('mousedown', function(e) {
        //要获取鼠标距离内边距的距左，和距上的距离
        x_start = e.pageX - box.offsetLeft;
        y_start = e.pageY - box.offsetTop;
        // console.log(x_start, y_start);
        flag = true;
    });
    //2.移动
    //想一想是谁移动，鼠标在盒子里面并没有移动，所以移动的是谁呢？
    document.addEventListener('mousemove', function(e) {
        //现在我们需要用新的鼠标的pageX，pageY 减去 之前已经获取到的x_start,y_start的固定值
        if (flag == true) {
            var left = e.pageX - x_start;
            var top = e.pageY - y_start;
            //新的盒子距左，距上的距离已经求出，现在赋值就可以了
            box.style.top = `${top}px`;
            box.style.left = `${left}px`;
        }
    });

    //3.鼠标松开
    //最后一步，谁来操作，鼠标
    box.addEventListener('mouseup', function() {
        flag = false;
    });

---

还有疑问的小伙伴，可以在下方评论，我会及时解答的