vue中鼠标拖动触发滚动条的移动

前言

在做后端管理系统中，像弹窗或大的表单时，经常会有滚动条的出现，但有些时候如流程、图片等操作时，仅仅使用鼠标拖动滚动条操作不太方便，如果使用鼠标拖拽图片或容器来触发滚动条的移动就比较方便了

功能设计

如果要实现鼠标辅助触发滚动条的移动，需要借助 mousedown，mouseup，mousemove 三个事件，通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。
考虑到鼠标的拖动有独立和可复用性，可以创建一个类来封装鼠标事件，使用时只要把事件挂到指定的容器上，就可以实现功能的复用

1、创建鼠标移动事件类

创建move.js

// 鼠标移动滚动位置类
class Drag {
    
    
  constructor(vm) {
    
    
    this.dragWrap = vm;// 要挂载的容器
    this._dom = {
    
    };
    this._x = 0;
    this._y = 0;
    this._top = 0;
    this._left = 0;
    this.move = false;
    this.down = false;
    this.init.apply(this, arguments);
  }

  // 绑定事件
  init() {
    
    
    this.bindEvent();
  }

  // 给要素增加鼠标事件mousedown，mouseup，mousemove
  bindEvent() {
    
    
    var t = this;
    this.dragWrap.addEventListener('mousedown', function (e) {
    
    
      e && e.preventDefault();
      if (!t.move) {
    
    
        t.move = false;
        t.down = true;
        t._x = e.clientX;
        t._y = e.clientY;
        t._top = t.dragWrap.scrollTop;
        t._left = t.dragWrap.scrollLeft;
      }
    });
    this.dragWrap.addEventListener('mouseup', function (e) {
    
    
      e && e.preventDefault();
      t.move = false;
      t.down = false;
    });
    this.dragWrap.addEventListener('mousemove', function (e) {
    
    
      if (t.down) {
    
    
        e && e.preventDefault();
        t.move = true;
        let x = t._x - e.clientX;
        let y = t._y - e.clientY;
        t.dragWrap.scrollLeft = t._left + x;
        t.dragWrap.scrollTop = t._top + y;
      }
    });
  }
}
export default Drag;

在页面中使用

在页面中使用move.js类，实现鼠标移动触发滚动条位置的移动

<template>
  <div style="padding: 20px">
    <h2>div move</h2>
    <div ref="main" class="main">
      <div class="box">
        <div>1111111111111111111111</div>
      </div>
    </div>
  </div>
</template>
<script>
import Drag from './move.js';
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  mounted() {
    
    
    new Drag(this.$refs.main);
  },
  methods: {
    
    }
};
</script>
<style lang="scss" scoped>
.main {
    
    
  width: 400px;
  height: 400px;
  background-color: lightgray;
  overflow: auto;
}
.box {
    
    
  width: 500px;
  height: 500px;
  padding-top: 100px;
  background-color: red;
  text-align: center;
  cursor: pointer;
}
</style>

实现效果