原⽣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;
borderboxheight: 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(){
// ⿏标按下时
usedown= e =>{
e = e || window.event;
// e.offsetX获取到的是⿏标相对于li的坐标
// e.layerX获取到的是⿏标相对于ul(最近的有绝对定位的元素)的坐标
let disX = e.layerX;
// ⿏标移动时
e = e || window.event;
this.box.scrollLeft =this.box.offsetLeft -(e.clientX - disX);
}
// ⿏标弹起时
}
// 取消默认⾏为
if(e.preventDefault){
e.preventDefault();
}else{
return false;
}
}
}
}
// 创建新的对象并传参
(new dragMove('box')).init();
(new dragMove('box1')).init();
最终效果
实际应⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。