原生JS案例（面向对象）——按住鼠标实现左右拖动列表

需求

鼠标在有色部分按下后, 可以对有颜色的部分进行左右拖拽

基本结构效果图

HTML页面

• id为box的一个对象

    <div class="box" id="box">
        <ul class="ul-list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

• id为box1的一个对象

    <div class="box" id="box1">
        <ul class="ul-list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>

CSS样式

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 400px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .ul-list {
            width: 2000px;
            height: 200px;
            line-height: 200px;
            position: absolute;
            display: flex;
            background-color: red;
            box-sizing: border-box;
        }

        .ul-list li {
            text-align: center;
            width: 200px;
        }

        .ul-list li:nth-child(odd) {
            background-color: aqua;
        }

        .ul-list li:nth-child(even) {
            background-color: #008c07;
        }

实现思路

1. 鼠标按下时, 记录鼠标相对于ul的坐标disX。注意：这里不能用e.offsetX, 因为e.offsetX获取到的是鼠标相对于li的坐标。而我们要获取的是离鼠标最近的有绝对定位的父元素ul， 也就是用e.layerX。
2. 当鼠标移动时， 是在整个浏览器窗口移动， 所以给document绑定鼠标移动事件。
3. 移动时，先求出移动后盒子离浏览器左边的距离（e.clientX - disX），再用移动前盒子离浏览器左边的距离（box.offsetLeft）减去移动后盒子离浏览器左边的距离（e.clientX - disX），并赋值给盒子的滚动距离（box.scrollLeft）
4. 鼠标弹起时, 解除document的鼠标移动事件
   

原生JS

class dragMove {
    constructor(selector) {
        // 获取dom元素
        this.box = document.querySelector(`#${selector}`);
        this.ulList = this.box.querySelector('ul');

        // 设置ul的宽度, ul的宽度跟随li的数量动态变化
        this.ulList.style.width = this.ulList.querySelector('li').offsetWidth * this.ulList.querySelectorAll('li').length + 'px';
    }
    init() {
        this.bindEvents()
    }
    bindEvents() {
        // 鼠标按下时
        this.ulList.onmousedown = e => {
            e = e || window.event;
            // e.offsetX获取到的是鼠标相对于li的坐标
            // e.layerX获取到的是鼠标相对于ul(最近的有绝对定位的元素)的坐标
            let disX = e.layerX;

            // 鼠标移动时
            document.onmousemove = e => {
                e = e || window.event;
                this.box.scrollLeft = this.box.offsetLeft - (e.clientX - disX);
            }

            // 鼠标弹起时
            document.onmouseup = () => {
                document.onmousemove = null;
            }

            // 取消默认行为
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                return false;
            }
        }
    }
}
// 创建新的对象并传参
(new dragMove('box')).init();
(new dragMove('box1')).init();

最终效果

实际应用