Day27 Click and Drag

發表於 | 分類於 | 閱讀次數:
| 571

Demo
一般來說在桌機上要移動畫面不是拖曳卷軸就是透過滾輪
這次要練習的是透過滑鼠來拖曳畫面的效果，主要練習取得位置和計算座標

對象和變數

1
2
3
4
const items = document.querySelector('.items')
let isdowm = false
let startX; //現在滑鼠在整個slide的哪個位置
let scrollnow; //卷軸現在位置

在這個範例中我們需要判斷滑鼠是否按下，
所以我們定義一個變數isdowm = false按下後變成ture

另外我們要有滑鼠所在的X位置和卷軸位置

事件

滑鼠按下後會套用淡化與放大的效果
滑鼠按下並移動時要拖曳
滑鼠放開與離開目標時要取消拖曳,取消效果

所以有四個事件：

1
2
3
4
5
6
7
8
9
10
11
12
items.addEventListener('mousedown',()=>{
  
})
items.addEventListener('mouseup',()=>{

})
items.addEventListener('mouseleave',()=>{

})
items.addEventListener('mousemove',()=>{

})

mousedown

滑鼠按下我們要套用一個已經寫好的.avtice樣式，我們把套用樣式的涵式獨立出來
去判斷是否按下才套用樣式

1
2
3
4
5
6
7
8
9
function active(){
  isdowm ? items.classList.add('active') : items.classList.remove('active')
}
items.addEventListener('mousedown',(e)=>{
  isdowm = true
  active()
  scrollnow = items.scrollLeft
  startX = e.pageX //先取得起點位置
})

為什麼要取得現在位置?因為我們待會需要計算滑鼠移動了多少距離

mosuedown和mouseleave

我們先處理簡單的mosuedown和mouseleave
滑鼠移開後要讓isdowm變成false

1
2
3
4
5
6
7
8
items.addEventListener('mouseup',()=>{
  isdowm = false
  active()
})
items.addEventListener('mouseleave',()=>{
  isdowm = false
  active()
})

重點:mousemove

1
2
3
4
5
6
7
items.addEventListener('mousemove',(e)=>{
  if(!isdowm) return
  let moveafter = e.pageX
  let move = moveafter - startX //實際要移動的量
  items.scrollLeft = scrollnow - move
  //滑鼠移動後的位置-剛開始的位置(startX)= 卷軸移動的距離
})

一開始我們就要判斷滑鼠是否按下if(!isdowm) return，否則就結束
mousemove是不斷觸發的，所以我們的moveafter會不斷地改變
我們透過　移動後的距離 - 開始的距離 取得我們卷軸要移動的值

items.scrollLeft = scrollnow - move 究竟是 +move 還是 *-move 就看需求效果決定囉

再套用給items.scrollLeft就大功告成囉！

補充筆記

在這邊的透視效果主要來自：perspective搭配transform等

詳細perspective介紹

0%