vue拖拽元素事件

 

用到的事件：

onmousedown：鼠标的按下事件

onmouseove：鼠标的移动事件

onmouseup：鼠标的松开事件

 

总结：

1. 先获取鼠标在页面中的位置
2. 获取鼠标按下时 mousedown 鼠标距离盒子内部的位置：
     用鼠标的位置减去盒子距离X Y轴的距离就是鼠标在盒子内的位置
       .pageY  获取鼠标Y轴距离页面的距离
       .pageX  获取鼠标X轴距离页面的距离
       .offsetLeft  获取元素距离页面左侧距离
       .offsetTop  获取元素距离页面上侧距离
 
3. 获取鼠标按下后  移动时的坐标
     用移动时的坐标减去 鼠标距离盒子内部的位置然后
     重新给当前元素的坐标赋值
4.当鼠标事件抬起时 将拖拽事件清楚

 

1.样式部分

<template>
  <div class="home">
    <div @mousedown="move" class="wqh"></div>
  </div>
</template>

2.css部分

<style scoped lang="scss">
.wqh {
  position: relative; /*定位*/
  top: 0px;
  left: 0px;
  width: 200px;
  height: 200px;
  background: #666; /*设置一下背景*/
}
* {
  padding: 0;
  margin: 0;
}
</style>

3.js事件部分

export default {
  name: "Home",
  methods: {

    move(e) {
      let event = e.target;  //获取wqh盒子
      //获取鼠标位置
      let pageX = e.pageX; 
      let pageY = e.pageY;
      //获取鼠标按下时鼠标在盒子中的位置
      var boxX = pageX - event.offsetLeft;
      var boxY = pageY - event.offsetTop;

      document.onmousemove = function (e) {
        //获取鼠标拖拽式在页面上的位置
        let pageXs = e.pageX;
        let pageYs = e.pageY;
        event.style.left = pageXs - boxX + "px";
        event.style.top = pageYs - boxY + "px"; 
      };

      document.onmouseup = function () {
        document.onmousemove = null;  //删除拖拽事件
      };
    },
  },
};