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


Posted in Vue.js onDecember 10, 2020

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:github.com/qq449245884…

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

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

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

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

这里线索又断了。

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

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

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

准备上手试试

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

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

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

<div class="vue-drag-scroll-wrapper" :style="zoomStye">
 // 这里省略一些不太重要的代码
</div>

<script>
export default {
 name: 'VueDragScroll',
 props: {
  msg: String
 },
 data () {
  return {
   scale: 100
  }
 },
 computed: {
  zoomStye () {
   const INIT_WIDTH = 2208
   const INIT_HEIGHT = 1206
   const width = INIT_WIDTH * (1 + (100 - this.scale)/100)
   const height = INIT_HEIGHT * (1 + (100 - this.scale)/100)
   console.log(width)
   console.log(height)
   return {
    width: `${width}px`,
    height: `${height}px`,
    transform: `scale(${this.scale/100})`
   }
  }
 }
}
</script>

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

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

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

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

指令代码如下:

import Vue from 'vue'

Vue.directive('dragscroll', function (el) {
 el.onmousedown = function (ev) {
  console.log(el)
  const disX = ev.clientX
  const disY = ev.clientY
  const originalScrollLeft = el.scrollLeft
  const originalScrollTop = el.scrollTop
  const originalScrollBehavior = el.style['scroll-behavior']
  const originalPointerEvents = el.style['pointer-events']
  // auto: 默认值,表示滚动框立即滚动到指定位置。
  el.style['scroll-behavior'] = 'auto'
  el.style['cursor'] = 'grabbing'
  // 鼠标移动事件是监听的整个document,这样可以使鼠标能够在元素外部移动的时候也能实现拖动
  document.onmousemove = function (ev) {
   ev.preventDefault()
   // 计算拖拽的偏移距离
   const distanceX = ev.clientX - disX
   const distanceY = ev.clientY - disY

   el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY)
   console.log(originalScrollLeft - distanceX, originalScrollTop - distanceY)
   // 在鼠标拖动的时候将点击事件屏蔽掉
   el.style['pointer-events'] = 'none'
   document.body.style['cursor'] = 'grabbing'
  }
  document.onmouseup = function () {
   document.onmousemove = null
   document.onmouseup = null
   el.style['scroll-behavior'] = originalScrollBehavior
   el.style['pointer-events'] = originalPointerEvents
   el.style['cursor'] = 'grab'
  }
 }
})

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

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

<div v-dragscroll class="vue-drag-scroll-out-wrapper">
 <div class="vue-drag-scroll-wrapper" :style="zoomStye">
  // 这里省略一些不太重要的代码
 </div>
</div>

<style scoped>
.vue-drag-scroll-out-wrapper{
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  cursor: grab;
  position: absolute;
  top:0;
  left: 0;
  &::-webkit-scrollbar { width: 0 !important } // 隐藏垂直方向的滚动条
}
</style>

这里需要注意的在 .vue-drag-scroll-out-wrapper 要设置 overflow 值,否则无法滚动(测试出来的)。

这样拖拽效果就出来啦:

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

增加缩放

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

<div class="tolbox-zoom-wrapper">
 <div class="zoom-inner">
 <span class="iconfont iconsuoxiao"
  :class="{'disabled': scale === 25}" style="font-size:22px"
  @click="handleReduce"
 />
 <span class="iconfont iconfangda"
  :class="{'disabled': scale === 100}"
  @click="handleEnlarge" 
 />
 <div class="scale-text">{{scale}}%</div>
 </div>
</div>

效果:

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

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

handleReduce () {
 if (this.scale === 25) return
 this.scale -= 25
},
handleEnlarge () {
 if (this.scale === 100) return
 this.scale += 25
}

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

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

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

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

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

最终的效果:

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

当前这个只是简单的一个排版,大家根据自己需要布局,这里主要还是分享一些思路,如果大家有好的思路,欢迎留言分享。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

以上就是Vue 实现一个简单的鼠标拖拽滚动效果插件的详细内容,更多关于vue 鼠标拖拽滚动插件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 #Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 #Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 #Vue.js
vue中如何自定义右键菜单详解
Dec 08 #Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 #Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 #Vue.js
You might like
十天学会php之第九天
2006/10/09 PHP
php实现json编码的方法
2015/07/30 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
医科大学生毕业的自我评价分享
2013/11/12 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
高中军训感言600字
2014/03/11 职场文书
小区文明倡议书
2014/05/16 职场文书
岳庙导游词
2015/02/04 职场文书
社区活动总结范文
2015/05/07 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Python集合set()使用的方法详解
2022/03/18 Python
vue使用element-ui按需引入
2022/05/20 Vue.js