鼠标操作 vue [学习记录]

html代码

    <div class="item1" @mousedown="mousedown($event)">
      鼠标拖动demo <br />
      event.clientY和event.clientX: 鼠标在页面相对可见区域的<br />y值:
      {{ clientY }} X值: {{ clientX }}<br />
    </div>
    <div
      class="item-mousewheel"
      @mousewheel="mousewheel($event)"
      @DOMMouseScroll="mousewheel($event)"
    >
      滚轮事件 兼容火狐 ie 谷歌 <br />
      可以滚动滚轮控制位置<br />
      event.wheelDeltaY 滚轮滚动的Y值 谷歌浏览器 向上 120 向下 -120<br />
      event.detail 滚轮滚动的Y值 火狐浏览器 向上-3 向下 3
    </div>

JS 代码

 mousedown (e) {


      let current = document.getElementsByClassName("item1")[0]; // 取得当前被选取的元素
      let left = e.clientX - current.offsetLeft; // e.clientX 获取当前鼠标相对于页面的X Y 坐标
      let right = e.clientY - current.offsetTop; // offsetLeft 相对于 父级 原点的left坐标  这里计算出来的是 鼠标位于元素相对原点的坐标 
      this.clientY = e.clientY;
      this.clientX = e.clientX;
      document.onmousemove = (event => {
        current.style.left = event.clientX - left + 'px'; // 获得当前实时的鼠标XY坐标 然后减去 该元素的相对原点的坐标 就等于当前元素的 坐标
        current.style.top = event.clientY - right + 'px';
      })
      document.onmouseup = (event => {
        document.onmousedown = null;
        document.onmousemove = null;
      })

    },
    // 鼠标滚动事件
    mousewheel (event) {
      let dom = document.getElementsByClassName("item-mousewheel")[0];
      let top = dom.offsetTop;
      if (event.wheelDeltaY > 0 || event.detail < 0) {

        dom.style.top = top - 10 + 'px';
        return false;
        // alert("向上滚")
      } else {
        dom.style.top = top + 10 + 'px';
        return false;
        // alert("向下滚")
      }
    }