Vue 實現一個簡單的滑鼠拖拽滾動效果外掛

阿新 • • 發佈：2020-12-11

最近開源了一個 Vue 元件，還不夠完善，歡迎大家來一起完善它，也希望大家能給個 star 支援一下，謝謝各位了。

github 地址：github.com/qq449245884…

最近在做一個新的專案，有個需要是這樣的：

簡單描述一下，就是滑鼠拖動頁面，整個頁面會隨著的滑鼠的拖拽而移動，如果頁面有內容，裡面的內容也需要跟著拖動的外層整體移到。

一開始沒啥思路，所以就發了個朋友圈，得到的答案挺多的，主要還是用拖拽之類的，但這個拖拽只是單個元素的拖動，我想要的整個檢視的拖動。

這裡線索又斷了。

於是又回到飛書有類似功能的頁面，然後仔細檢查一下它頁面的 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 來做縮放：