使用原生JavaScript实现拖动校验功能

/*滑块使用定位,背景没有设置宽度*/.box {
　　宽度:250 px;
　　高度:50 px;
　　background - color: # ccc;
　　位置:相对;
　　保证金:0汽车;
　　}
　　.btn {
　　box-sizing: border-box;
　　宽度:50 px;
　　高度:50 px;
　　边界:1 px固体# ccc;
　　颜色:# ccc;
　　background - color: # fff;
　　位置:绝对的;
　　左:0;
　　上图:0;
　　光标:指针;
　　z - index: 4;
　　}
　　。text {
　　位置:绝对的;
　　高度:50 px;
　　左:50%;
　　变换:translateX (-50%);
　　z - index: 2;
　　用户选择:没有;
　　}
　　.bg {
　　宽度:0;
　　高度:50 px;
　　background - color: # 25 c20f;
　　z - index: 3;
　　位置:绝对的;
　　上图:0;
　　左:0;
　　}

2,分析事件——鼠标按下,鼠标移动,鼠标松开

2.1鼠标按下,获取此时事件的水平距离downX;鼠标移动,获取此时事件的水平距离e。clientX;那么鼠标移动的距离moveX=e。clientX downX,也就是滑块跟着移动的距离,即同时bg的宽度也就是滑块移动的距离,即

2.2滑块拉到头了,表示验证成功
什么时候表示滑块滑到头了,也就是moveX等于框的宽度——滑块的宽度。那么文字的改变成“验证成功”。且滑块停留在了最有端。无论鼠标点击还是移动,都不会在影响了。那就是清除事件,清除按钮的鼠标移动和鼠标按下事件此时验证成功,设立一个标记为表示验证成功国旗=true,后续需要用到。

2.3那么如果我们滑块拉到一半就松开了鼠标时,滑块应该回到原始位置。但是如果已经验证成功了,那就不会回到原点。
鼠标松开事件触发,那么鼠标移动已经不能影响滑块了,那么此时需要清除移动事件没有验证成功那就回到原点

函数选择器(名字){
　　返回document.querySelector(名称);
　　}
　　var盒=选择器(& # 39;.box& # 39;),
　　btn=选择器(& # 39;.btn& # 39;),
　　文本=选择器(& # 39;。text # 39;),
　　bg=选择器(& # 39;.bg& # 39;),
　　国旗=false;//鼠标按下,移动,松开//按下的距离和移动的距离差就是滑块移动的距离
　　btn。onmousedown=function (e){//按钮按下的
　　var downX=e.clientX
　　btn。onmousemove=function (e) {//e事件的状态
　　var moveX=e。clientX - downX;
　　如果(moveX比;0) {
　　this.style。左=moveX + & # 39; px # 39;;
　　bg.style。宽度=moveX + & # 39; px # 39;//滑块拉到头了,表示验证成功
　　如果(moveX祝辞=盒子。offsetWidth - this.offsetWidth) {
　　bg.style。zIndex=1;//设置bg的z - index的值是为了处理党滑块经过原始值的时候,bg将文字覆盖了。验证成功后,有让文字显示出来
　　文本。innerText=& # 39;实现验证成功& # 39;;
　　text.style。颜色=& # 39;# fff& # 39;;
　　国旗=true;//此时鼠标移动或者按下,滑块不在跟着移动了
　　btn。onmousemove=零;//btn。onmousedown=零;//清除事件
　　}
　　}
　　}
　　}
　　btn。onmouseup=function () {
　　btn。onmousemove=零;//如果验证成功了,那就不会回到原点
　　如果(国旗){
　　返回;
　　}
　　this.style。左=0;
　　bg.style。宽度=0;
　　}

<>强完整可以运行的源码