目標

今天要做的是，拖拉然後捲動區塊

Step1

const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', () => {
    isDown = true;
    slider.classList.add('active')
});

slider.addEventListener('mousemove', () => {
    if(!isDown) return;
    console.count(isDown);
});

slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active')
});

slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active')
});

第一步一樣是先選定我們要作業的元素，還有宣告全域變數

接下來，我們要處理四種滑鼠事件(Mouse Event)，分別是mousedown、mousemove、mouseup、mouseleave，這邊就會使用到isDown這個變數了，這邊用它來記錄滑鼠左鍵是否為點擊狀態

這邊原作者還有在點擊時加上active的class，這可以在畫面上加上一點小變化

Step2

slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active')
    console.log(e.pageX);
});

這邊要取得游標的位置，我們可以讀取MouseEvent的pageX屬性

MouseEvent.pageX

MouseEven的pageX屬性回傳相對於整個html文檔的左側邊緣游標所在的X（水平）坐標（以像素為單位）

補充 pageX/Y, clientX/Y, screenX/Y 的不同

pageX/Y：

游標在html文檔的座標

clientX/Y：

游標在瀏覽器視窗內的座標

screenX/Y：

游標在螢幕範圍的座標

slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active')
    startX = e.pageX - slider.offsetLeft;
		scrollLeft = slider.scrollLeft;
});

取好游標的位置後，我們需要減去作業範圍以外的區域，來作為起始位置(startX)

另外，還要取得橫向滾動條的位置(scrollLeft)

Element.scrollLeft

此屬性獲取或設置元素內容從其左邊緣滾動的像素數

Step3

接下來要開始處理拖拉滾動的效果了

slider.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = x - startX;
    slider.scrollLeft = scrollLeft - walk;
});

首先，在每次游標移動的時候計算游標的Ｘ軸位置，然後跟起始位置相減，就可以得到拖拉的距離

接下來，將橫向滾動條的位置設為滑鼠點擊時取得的位置，減去拖拉的距離，就完成了