課程目的:

這次的內容是滑鼠控制卷軸拖移
作品實做

本次功能實作重點：

• 抓取Dom元素以及監聽
• 點擊時觸發特效
• 滑鼠移動時卷軸滾動
• 停下時取消特效

抓取Dom元素以及監聽

const items = document.querySelector(".items"); //選取items區塊
 let startX = 0; //滑鼠點擊時前座標的預設值
 items.addEventListener("mousedown", startDrag); //監聽滑鼠按下
 items.addEventListener("mousemove", dragHandler);//滑鼠移動
 items.addEventListener("mouseup", stopDrug);//滑鼠放開
 items.addEventListener("mouseleave", stopDrug);//滑鼠離開區塊

點擊時觸發特效

      function startDrag(e) {
        items.classList.add("active"); //當滑鼠按下時增加class "active"
        startX = e.pageX; //抓取點擊時的座標X
      }

滑鼠移動時卷軸滾動

      function dragHandler(e) {
       //如果classList中沒有active則跳出函式
        if (!items.classList.contains("active")) return; 
        
        let move = e.pageX - startX; //移動的距離=滑動時的座標-最初的座標
        startX = e.pageX; //紀錄移動後的座標
        items.scrollLeft -= move; //設定滾動的距離
      }

停下時取消特效

  function stopDrug(e) {
        items.classList.remove("active"); //移除class為active的標籤
      }

導讀文件以及學習資源

[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 27：Click and Drag
JS30