PJCHENder 未整理筆記

[JS30] Day27: Click and Drag

2017-09-26

[JS30] Day27: Click and Drag

@([WesBos] JS30)[JavaScript]

keywords: coordinate system, drag

Manipulate CSS By CSS

利用 el.classList.add/remove/toggle('<className>') 來添加、移除、切換 class:

示範 JavaScript CSS Manipulation @ Codepen

1
2
3
slider.classList.remove('active')
slider.classList.add('active')
slider.classList.toggle('active')

瞭解座標系統

認識 offset, clientpage

  • offset:以該滑鼠游標所在的容器的左上角為原點(0,0),每間瀏覽器實做不同。
  • client:以瀏覽器 browser 左上角為原點(0,0)。
  • page:以 HTML Document 文件左上角為原點(0,0)。

示範 Concept of Browser Coordinate System @ Codepen

Element 可用屬性

Element in Web API @ MDN
HTMLElement in Web API @ MDN

1
2
let scrollLeft = slider.scrollLeft
let offsetLeft = slider.offsetLeft

監控滑鼠是否處於點擊的狀態

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const slider = document.querySelector('.items')

let isDown = false
slider.addEventListener('mouseleave', function(e) {
isDown = false
})

// callback function
slider.addEventListener('mousedown', function(e) {
isDown = true
})

slider.addEventListener('mouseup', function(e) {
isDown = false
})

slider.addEventListener('mousemove', function(e) {
if (isDown === false) { return }
// 當 isDown 為真時才會執行這下面的程式內容...
})

計算滑鼠移動的位移

1
2
3
4
5
6
7
8
9
10
11
12
let startX // 一開始滑鼠點擊時 x 的座標值
let moveX // 滑鼠點擊並移動時 x 的座標值
let deltaX // 滑鼠移動了多少距離

slider.addEventListener('mousedown', function(e) {
startX = e.pageX
})

slider.addEventListener('mousemove', function(e) {
moveX = e.pageX
deltaX = startX - moveX
})

成品

Day27: Click and Drag

延伸:利用同樣的方式製作可拖拉的元素

Click and Drag Element @ Codepen

掃描二維條碼,分享此文章