前言

在做后端管理系統(tǒng)中，像彈窗或大的表單時(shí)，經(jīng)常會(huì)有滾動(dòng)條的出現(xiàn)，但有些時(shí)候如流程、圖片等操作時(shí)，僅僅使用鼠標(biāo)拖動(dòng)滾動(dòng)條操作不太方便，如果使用鼠標(biāo)拖拽圖片或容器來觸發(fā)滾動(dòng)條的移動(dòng)就比較方便了

功能設(shè)計(jì)

如果要實(shí)現(xiàn)鼠標(biāo)輔助觸發(fā)滾動(dòng)條的移動(dòng)，需要借助 mousedown，mouseup，mousemove 三個(gè)事件，通過鼠標(biāo)的移動(dòng)來動(dòng)態(tài)修改滾動(dòng)條的scrollLeft和scrollTop,來模擬實(shí)現(xiàn)滾動(dòng)條的位置變更。
考慮到鼠標(biāo)的拖動(dòng)有獨(dú)立和可復(fù)用性，可以創(chuàng)建一個(gè)類來封裝鼠標(biāo)事件，使用時(shí)只要把事件掛到指定的容器上，就可以實(shí)現(xiàn)功能的復(fù)用

1、創(chuàng)建鼠標(biāo)移動(dòng)事件類

創(chuàng)建move.js

// 鼠標(biāo)移動(dòng)滾動(dòng)位置類
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();
  }

  // 給要素增加鼠標(biāo)事件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類，實(shí)現(xiàn)鼠標(biāo)移動(dòng)觸發(fā)滾動(dòng)條位置的移動(dòng)

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

實(shí)現(xiàn)效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-541691.html

到了這里，關(guān)于vue中鼠標(biāo)拖動(dòng)觸發(fā)滾動(dòng)條的移動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！