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组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
Vue如何清空对象
Mar 03 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue elementUI表格控制对应列
Apr 13 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
一个ftp类(ini.php)
2006/10/09 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
西部世纪面试题
2014/12/05 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
办公室内勤工作职责
2013/12/11 职场文书
一名老师的自我评价
2014/02/07 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
家长学校工作方案
2014/05/07 职场文书
校庆标语集锦
2014/06/25 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2019年工作总结范文
2019/05/21 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android