iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

森林系工程師之開始工作才學JS?!系列 第 29

Day28 -- Click and Drag

目標

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

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),分別是mousedownmousemovemouseupmouseleave,這邊就會使用到isDown這個變數了,這邊用它來記錄滑鼠左鍵是否為點擊狀態

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

Step2

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

這邊要取得游標的位置,我們可以讀取MouseEventpageX屬性

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;
});

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

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


上一篇
Day27 -- Stripe Follow Along Dropdown
下一篇
Day29 -- Video Speed Controller
系列文
森林系工程師之開始工作才學JS?!32

尚未有邦友留言

立即登入留言