使用 Vue 实现一个简单的鼠标拖拽滚动效果插件

开发 前端
简单描述一下,就是鼠标拖动页面,整个页面会随着的鼠标的拖拽而移动,如果页面有内容,里面的内容也需要跟着拖动的外层整体移到。

 [[356473]]

演示事例

http://www.longstudy.club/vue-drag-scroll/index.html

最近在做一个新的项目,有个需要是这样的:

 

简单描述一下,就是鼠标拖动页面,整个页面会随着的鼠标的拖拽而移动,如果页面有内容,里面的内容也需要跟着拖动的外层整体移到。

一开始没啥思路,所以就发了个朋友圈,得到的答案挺多的,主要还是用拖拽之类的,但这个拖拽只是单个元素的拖动,我想要的整个视图的拖动。

这里线索又断了。

于是又回到飞书有类似功能的页面,然后仔细检查一下它页面的 DOM 结构,如下所示:

 

发现有这一层,它把页面设置的很宽,很高,为了隐藏滚动条,所以设置overflow: hidden;,看了这一设置,突然灵光一现,难道它是用拖拽来触发滚动条的滚动,在细想,哇靠,这思路可行的,NB。

准备上手试试

创建一个 vue 项目,这个就不细说的,我已经把原码发布到 github 上了,有兴趣自己看看:

https://github.com/qq449245884/vue-drag-scroll

首先给外层加个大大的宽和高:

  1. <div class="vue-drag-scroll-wrapper" :style="zoomStye"
  2.   // 这里省略一些不太重要的代码 
  3. </div> 
  4.  
  5. <script> 
  6. export default { 
  7.   name'VueDragScroll'
  8.   props: { 
  9.     msg: String 
  10.   }, 
  11.   data () { 
  12.     return { 
  13.       scale: 100 
  14.     } 
  15.   }, 
  16.   computed: { 
  17.     zoomStye () { 
  18.       const INIT_WIDTH = 2208 
  19.       const INIT_HEIGHT = 1206 
  20.       const width = INIT_WIDTH * (1 + (100 - this.scale)/100) 
  21.       const height = INIT_HEIGHT * (1 + (100 - this.scale)/100) 
  22.       console.log(width) 
  23.       console.log(height) 
  24.       return { 
  25.         width: `${width}px`, 
  26.         height: `${height}px`, 
  27.         transform: `scale(${this.scale/100})` 
  28.       } 
  29.     } 
  30.   } 
  31. </script> 

这里设置了一个计算属性 zoomStye,主要使用就是给外层加一个在的宽,和高,这里我还设置了一个缩放比较,为了是能放大缩小页面,下面讲。运行效果:

 

接着,我们需要监听鼠标的拖拽来触发滚动条效果,因为需要对 dom 的操作,所以这里把拖拽处理逻辑用 vue 指令封装起来,这样后面有需要,只要使用该指令即可。

注意:在 vue 中如果需要对 dom 进行多次操作,最好是把它封装在指令中。

指令代码如下:

  1. import Vue from 'vue' 
  2.  
  3. Vue.directive('dragscroll'function (el) { 
  4.   el.onmousedown = function (ev) { 
  5.     console.log(el) 
  6.     const disX = ev.clientX 
  7.     const disY = ev.clientY 
  8.     const originalScrollLeft = el.scrollLeft 
  9.     const originalScrollTop = el.scrollTop 
  10.     const originalScrollBehavior = el.style['scroll-behavior'
  11.     const originalPointerEvents = el.style['pointer-events'
  12.     // auto: 默认值,表示滚动框立即滚动到指定位置。 
  13.     el.style['scroll-behavior'] = 'auto' 
  14.     el.style['cursor'] = 'grabbing' 
  15.     // 鼠标移动事件是监听的整个document,这样可以使鼠标能够在元素外部移动的时候也能实现拖动 
  16.     document.onmousemove = function (ev) { 
  17.       ev.preventDefault() 
  18.       // 计算拖拽的偏移距离 
  19.       const distanceX = ev.clientX - disX 
  20.       const distanceY = ev.clientY - disY 
  21.  
  22.       el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY) 
  23.       console.log(originalScrollLeft - distanceX, originalScrollTop - distanceY) 
  24.       // 由于我们的图片本身有点击效果,所以需要在鼠标拖动的时候将点击事件屏蔽掉 
  25.       el.style['pointer-events'] = 'none' 
  26.       document.body.style['cursor'] = 'grabbing' 
  27.     } 
  28.     document.onmouseup = function () { 
  29.       document.onmousemove = null 
  30.       document.onmouseup = null 
  31.       el.style['scroll-behavior'] = originalScrollBehavior 
  32.       el.style['pointer-events'] = originalPointerEvents 
  33.       el.style['cursor'] = 'grab' 
  34.     } 
  35.   } 
  36. }) 

这里的主要思路就是利用 el.scrollTo 来触发滚动条的移到。

有了 dragscroll 指令,我们来使用一下,首先我们需要在增加一层外层:

  1. <div v-dragscroll  class="vue-drag-scroll-out-wrapper"
  2.  <div  class="vue-drag-scroll-wrapper" :style="zoomStye"
  3.     // 这里省略一些不太重要的代码 
  4.   </div> 
  5. </div> 
  6.  
  7. <style scoped> 
  8. .vue-drag-scroll-out-wrapper{ 
  9.     overflow-x: hidden; 
  10.     width: 100%; 
  11.     height: 100%; 
  12.     cursor: grab; 
  13.     position: absolute
  14.     top:0; 
  15.     left: 0; 
  16.     &::-webkit-scrollbar { width: 0 !important } // 隐藏垂直方向的滚动条 
  17. </style> 

// 这里省略一些不太重要的代码 这里需要注意的在 .vue-drag-scroll-out-wrapper 要设置 overflow 值,否则无法滚动(测试出来的)。

这样拖拽效果就出来啦:

 

增加缩放

这里,我们增加一个视图的放大和缩小,所以增加两个按钮:

  1. <div class="tolbox-zoom-wrapper"
  2.   <div class="zoom-inner"
  3.   <span class="iconfont iconsuoxiao" 
  4.     :class="{'disabled': scale === 25}" style="font-size:22px" 
  5.     @click="handleReduce" 
  6.   /> 
  7.   <span class="iconfont iconfangda" 
  8.     :class="{'disabled': scale === 100}" 
  9.     @click="handleEnlarge"   
  10.   /> 
  11.   <div class="scale-text">{{scale}}%</div> 
  12.   </div> 
  13. </div> 

效果:

 

这里的放大和缩小的逻辑就是通过我们增加减少 scale 来实现

  1. handleReduce () { 
  2.   if (this.scale === 25) return 
  3.   this.scale -= 25 
  4. }, 
  5. handleEnlarge () { 
  6.   if (this.scale === 100) return 
  7.   this.scale += 25 

缩放比例的关系就是开关给出的代码:

  1. const INIT_WIDTH = 2208 
  2. const INIT_HEIGHT = 1206 
  3. const width = INIT_WIDTH * (1 + (100 - this.scale)/100) 
  4. const height = INIT_HEIGHT * (1 + (100 - this.scale)/100) 

这个比例是我自己定的,比如现在减少到 75% ,那么最外层的高和宽就要对应的增加原来的 25%,因为缩放就是视野上的缩小,对应的距离就是拉宽。

最后就是使用 CSS 的 transform 来做缩放:

  1. transform: `scale(${this.scale/100})` 

最终的效果:

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2018-09-18 10:11:21

前端vue.jsjavascript

2022-10-10 08:39:19

CSS前端

2009-08-17 10:26:39

鼠标手势

2022-09-20 11:00:14

Vue3滚动组件

2023-05-22 09:10:53

CSSloading 效

2012-05-17 13:17:26

HTML5

2016-11-08 18:53:08

编译器

2012-05-28 13:38:41

HTML5

2012-05-10 16:46:09

Visual Stud

2009-09-01 16:14:06

C#窗口抖动

2021-07-20 10:30:46

Golanghttp语言

2021-11-02 15:35:01

JavaScriptCSS开发

2021-04-28 10:01:00

JSCSS进度条

2022-11-29 17:34:43

虚拟形象系统

2011-09-02 10:14:10

JQuery滚动Xslider

2022-03-08 13:23:38

Vue3抖音前端

2023-07-18 15:49:22

HTMLCSS

2020-06-04 12:55:44

PyTorch分类器神经网络

2022-06-13 06:33:04

浏览器浏览器插件

2009-09-03 16:50:35

C#鼠标形状
点赞
收藏

51CTO技术栈公众号