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

前言

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

功能设计

如果要实现鼠标辅助触发滚动条的移动,需要借助 mousedown,mouseup,mousemove 三个事件,通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。

考虑到鼠标的拖动有独立和可复用性,可以创建一个类来封装鼠标事件,使用时只要把事件挂到指定的容器上,就可以实现功能的复用

1、创建鼠标移动事件类

创建move.js

javascript 复制代码
// 鼠标移动滚动位置类
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 按下初始化
  // mousemove 移动
  // mouseup,mouseleave 松开,移出结束移动
  bindEvent() {
    let t = this;
    this.dragWrap.addEventListener('mousedown', (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',  (e) => {
      e && e.preventDefault();
      t.move = false;
      t.down = false;
    });
    this.dragWrap.addEventListener('mouseleave',  (e) => {
      e && e.preventDefault();
      t.move = false;
      t.down = false;
    });
    this.dragWrap.addEventListener('mousemove',  (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;

在页面中使用

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

2.给svg添加放大功能

html 复制代码
<template>
  <el-row class="app-container">
    <el-col>
      <el-form ref="form" v-model="value" label-width="80px" size="mini" style="position: absolute;top: 32px;z-index: 999;">
        <el-form-item label="缩放" prop="value">
          <el-input-number v-model="value" @change="changeSlider" :min="0" :max="3"></el-input-number>
        </el-form-item>
      </el-form>
      <div id="navShow" style="text-align: center;overflow: hidden;height:90vh;border: 1px solid #000000;">
        <div>
          <svg id="svgShow" style="cursor:pointer;width:96%;height:96%;padding: 10px;"></svg>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Drag from '@/utils/move.js';
export default {
  name: 'ProcessingFlow',
  data() {
    return {
      value: 2,
    }
  },
  mounted() {
    this.changeSlider()
    this.initScroll()
  },
  methods: {
    changeSlider() {
      let svg = document.getElementById('svgShow')
      if (this.value === 1) {
        svg.style.transform = 'scale(1.6)'
      } else if (this.value === 2) {
        svg.style.transform = 'scale(1.9)'
      } else if (this.value === 3) {
        svg.style.transform = 'scale(2.2)'
      } else {
        svg.style.transform = 'scale(1)'
      }
      svg.style.transformOrigin = ' 0 0'

      let nav = document.getElementById('navShow')
      // 滚动元素的父容器:刷新滚轮
      nav.scrollIntoView()
    },
    initScroll() {
      let nav = document.getElementById('navShow')
      new Drag(nav)
    },
  }
}
</script>

<style scoped>
</style>

实现效果

相关推荐
高达可以过山车不行几秒前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周4 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队23 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js