Vue中Dom元素跟随鼠标移动

1 .** 确认跟随鼠标的是一个Dom元素**

<template>
  <div class="moveWithMouse">
    <p>
      div元素
    </p>
  </div>
</template>


<style scoped>
.moveWithMouse{
  position: absolute;
  left: 10px;
  top: 10px;
  height: 300px;
  width: 300px;
  background-color: red;
}
</style>

2. 获取X坐标和Y坐标。

由于是跟随鼠标所以必须获取鼠标移动时X的坐标和Y的坐标，可以使用window.addEventListener(‘mousemove’,function (ev) {})来获取，其中ev.pageX获取横坐标，ev.pageY获取纵坐标。

3. 获取Dom元素并设置新位置

给相应的dom元素加className,使用getElementsByClassName(“className”)来语句获取该元素;然后使用Dom.style.来设置新的位置

let div = document.getElementsByClassName("moveWithMouse")
div[0].style.left = ev.pageX + 'px'
div[0].style.top = ev.pageY + 'px'

4. 完整代码及注意事项

<template>
  <div class="moveWithMouse">
    <p>
      div元素
    </p>
  </div>
</template>

<script>
export default {
  name: 'DomMoveWithMouse',
  mounted() {
    // 监听鼠标移动事件，触发moveWhthMouse方法
    window.addEventListener('mousemove',this.moveWhthMouseMethod)
  },
  methods: {
    moveWhthMouseMethod() {
      let div = document.getElementsByClassName("moveWithMouse")
      // 注意 获取的是所有ClassName=“moveWithMouse”的dom元素
      console.log(div)
      window.addEventListener('mousemove',function (ev){
        // 获取Dom元素位置
        console.log(ev.pageX)
        console.log(ev.pageY)
        // 设置Dom元素的位置
        // 注意：ev.pageX、ev.pageY是不带单位的，使用时需要加上单位px
        div[0].style.left = ev.pageX + 'px'
        div[0].style.top = ev.pageY + 'px'
      })
    }
  }
}


</script>

<style scoped>
.moveWithMouse{
  position: absolute;
  left: 10px;
  top: 10px;
  height: 300px;
  width: 300px;
  background-color: red;
}
</style>

1667790885922