需求
鼠标在有色部分按下后, 可以对有颜色的部分进行左右拖拽
基本结构效果图
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();