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)，分别是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;
});

首先，在每次游标移动的时候计算游标的Ｘ轴位置，然後跟起始位置相减，就可以得到拖拉的距离

接下来，将横向滚动条的位置设为滑鼠点击时取得的位置，减去拖拉的距离，就完成了