【原生javascript项目】Click and drag 27

作者：©Iaine 万一
简介：30 Day Challenge是 Wes Bos 设计的一个 30 天原生js编程挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。

本项目为第26天的“内容悬浮显示”项目。Have fun with the website! ♪(^∇^*)

源代码：https://github.com/janice143/JavaScript30Program/tree/master/27%20clickAndDrag/index.html

项目描述

本项目为一个横向条幅，实现的特效是鼠标点击实现横向拖拽。

项目重点

e.pageX
.scrollLeft
.offsetLeft
e.preventDefault()

项目过程

JS部分

编程思路为

监听最外层items元素的mousedown事件，触发后添加active类名，此类名具有一定的CSS特效。记录此时的起点startX 以及左边滚动的位置scrollLeft。
监听鼠标移动mousemove事件，给scrollLeft赋值，即可调整元素在水平方向滚动的位置。
鼠标离开mouseleave和不点击mouseup事件触发时，去掉active类名。

mousedown事件

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

mousemove事件


slider.addEventListener('mousemove', (e) => {
if (!isDown) return;  // stop the fn from running
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3;
slider.scrollLeft = scrollLeft - walk;
});

mouseleave和不点击mouseup事件

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

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

项目补充

一些CSS样式

overflow属性：控制元素溢出时的特性，主要有一下几个值
- visible 默认值，溢出也是可见的，没有被裁剪
- hidden 溢出的内容被裁剪，并且看不到
- scroll 溢出的内容被裁剪，但是可以添加滑块scrollbar看到溢出内容
- auto 有点像scroll
white-space空格处理
- normal表示合并空格，多个相邻空格合并成一个空格
- nowrap不换行，经常和overflow,text-overflow一起使用
- pre保留空格不换行，有几个空格算几个空格显示
- pre-wrap的作用是保留空格
user-select：禁止用户用鼠标在页面上选中文字、图片等，也就是，让页面内容不可选