Al arrastrar el mouse en vue, se activa el movimiento de la barra de desplazamiento

prefacio

En el sistema de administración de back-end, las barras de desplazamiento suelen aparecer cuando se utilizan ventanas emergentes o formularios grandes, pero a veces no es conveniente usar el mouse para arrastrar la barra de desplazamiento cuando se realizan operaciones como procesos e imágenes. conveniente arrastrar la imagen o el contenedor con el mouse para activar el movimiento de la barra de desplazamiento

diseño de características

Si desea realizar el movimiento de la barra de desplazamiento del disparador asistido por el mouse, debe usar tres eventos para modificar dinámicamente la suma mousedown，mouseup，mousemovede la barra de desplazamiento a través del movimiento del mouse para simular el cambio de posición de la barra de desplazamiento. Teniendo en cuenta que el arrastre del mouse es independiente y reutilizable, puede crear una clase para encapsular los eventos del mouse. Al usarlo, solo necesita colgar el evento en el contenedor especificado para realizar la reutilización de funciones.scrollLeftscrollTop

1. Cree una clase de evento de movimiento del mouse

Crear mover.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;

usar en la pagina

Use la clase move.js en la página para realizar el movimiento de la posición de la barra de desplazamiento desencadenada por el movimiento del mouse

<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>

lograr efecto