按住鼠标实现左右拖动列表
需求基本结构效果图HTML页面CSS样式实现思路原生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;}
实现思路
鼠标按下时, 记录鼠标相对于ul的坐标disX。注意：这里不能用e.offsetX, 因为e.offsetX获取到的是鼠标相对于li的坐标。而我们要获取的是离鼠标最近的有绝对定位的父元素ul， 也就是用e.layerX。当鼠标移动时， 是在整个浏览器窗口移动， 所以给document绑定鼠标移动事件。移动时，先求出移动后盒子离浏览器左边的距离（e.clientX - disX），再用移动前盒子离浏览器左边的距离（box.offsetLeft）减去移动后盒子离浏览器左边的距离（e.clientX - disX），并赋值给盒子的滚动距离（box.scrollLeft）鼠标弹起时, 解除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();
