前端功能4步

前端功能4步

1.查找需要触发的元素

2.触发元素绑定事件

3.查找需要改变的元素

4.修改目标元素

上例子//这是一个拖拽效果例子

<template>
  <div>
    <!-- 
          1.找到触发的元素
          2.给元素绑定事件
          mousedown//鼠标按下事件
       -->
    <div class="move" @mousedown="move">我是div</div>
  </div>
</template>

<script>
export default {
  methods: {
    //   绑定的事件
    move(e) {
      let odiv = e.target; //3.获取目标元素
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        //移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      //   松开手标右键
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
};
</script>

<style scoped>
.move {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
  text-align: center;
  line-height: 100px;
  left: 10px;
  top: 10px;
}
</style>

效果图