Vue实现鼠标拖拽

Vue实现鼠标拖拽

要实现拖拽，必须要使用三大秘法：（pc端）

1、鼠标按下事件：onmousedown

2、鼠标移动事件：onmousemove

3、鼠标抬起事件：onmouseup

---

移动端拖拽：

1、当在屏幕上按下手指时触发：touchstart

2、当在屏幕上移动手指时触发：touchmove

3、当在屏幕上抬起手指时触发：touchend

4、touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发
touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

实现鼠标拖动的原理：

1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标，然后获取盒子的离页面的横纵方向的距离
2、计算出鼠标相对盒子的距离
3、当鼠标移动的时候，获取鼠标移动的距离，在永鼠标此刻的位置减去鼠标相对盒子的距离，获得的是盒子此刻的坐标位置
4、将这个位置赋值给盒子
5、鼠标抬起，清除鼠标移动事件；

接下来我们上代码

<template>
  <div class="home">
    <div id="box" v-drag></div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {return {}},
  directives: {
    drag: {
      // 指令的定义
      inserted: function(el) {
        // el.drag();
        console.log(el);
        //获取元素
        // var dv = document.getElementById("dv");
        let x = 0;
        let y = 0;
        let l = 0;
        let t = 0;
        let isDown = false;
        //鼠标按下事件
        el.onmousedown = function(e) {
          //获取x坐标和y坐标
          x = e.clientX;
          y = e.clientY;

          //获取左部和顶部的偏移量
          l = el.offsetLeft;
          t = el.offsetTop;
          //开关打开
          isDown = true;
          //设置样式
          el.style.cursor = "move";
        };
        //鼠标移动
        window.onmousemove = function(e) {
          if (isDown == false) {
            return;
          }
          //获取x和y
          let nx = e.clientX;
          let ny = e.clientY;
          //计算移动后的左偏移量和顶部的偏移量
          let nl = nx - (x - l);
          let nt = ny - (y - t);

          el.style.left = nl + "px";
          el.style.top = nt + "px";
        };
        //鼠标抬起事件
        el.onmouseup = function() {
          //开关关闭
          isDown = false;
          el.style.cursor = "default";
        };
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#box {
  width: 60px;
  height: 60px;
  background-color: darkorange;
  border-radius: 50%;
  position: absolute;
  //脱离文档流
}
</style>

App实现鼠标拖拽

移动端实现拖拽，必须要使用三大秘法：

4、touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发
touchcancel。一般会在touchcancel时暂停游戏、存档等操作。