參考出處 JS 30 DAY 29

參考出處 Alex 宅幹嘛

今天在看 JS 30 要練習什麼，馬上被 drag 這個字吸住眼睛，今天來好好學一下。

練習重點

1. 拖拉～～～

實作

拖曳

由於瀏覽器裡沒有拖曳這個事件，所以我們要利用其他的事件來做組合。

拖曳這件事情，我們要分開來看

開始： mousedown

拖曳中：mousemove

結束： mouseup & mouseleave

監聽事件

const list = document.querySelector('.items')

list.addEventListener('mousedown',startDrag)
list.addEventListener('mousemove',dragHandler)
list.addEventListener('mouseup',stopDrag)
list.addEventListener('mouseleave',stopDrag)

效果

1. 滑鼠按下時畫面會放大，滑鼠離開後會恢復原狀，這個部分就是加上一個 class

const startDrag = function(){

  list.classList.add('active')
}

const stopDrag = function(){
  list.classList.remove('active')
}

2. 拖曳效果

首先我們要知道起點和終點，然後算出距離，

所以我們按下的時候，要知道位置在哪裡

先設 startX 為起點，接著算出移動的距離

startX = e.pageX 第二次移動，要把 startX 推到 pageX 的位置

list.scrollLeft -= move 拖曳的方向跟移動的方向是相反的。

這樣基本上已經做好了。但是我們要繼續做 click 的效果

let startX = 0

const startDrag = function(e) {
  list.classList.add('active')
  startX = e.pageX
}


const dragHandler = function(e){
  let move = e.pageX - startX
    startX = e.pageX
  list.scrollLeft -= move
}

3. 點擊效果

接著我們要加入判斷，如果有被點擊到才會開始拖曳的效果

const dragHandler = function(e){
  if(list.classList.contains('active')){
    let move = e.pageX - startX
  
    //第二次移動，把 startX 推到 pageX 的位置
    startX = e.pageX

    // 拖曳的方向跟移動的方向是相反的
    list.scrollLeft -= move
  }
}

這樣就完成拉

以上，明天見