可拖动进度条的实现

可拖动进度条的实现

• 大家好,今天工作不忙 分享一个简单的进度条案例.希望有需要的小伙伴可以看到.思路不一定是最好的.但绝对适合初学者

  首先 进度条的功能,你需要知道 进度条拖动前后 一共触发了3个事件
  即:
  1.鼠标按下事件
  2.鼠标拖动事件
  3.鼠标抬起事件
  其次 他的拖动原理是 通过计算当前拖动的坐标位置 减去进度条盒子到视口的距离.
  最后把进度条按钮 进行相应距离的偏移
  即 偏移的距离=鼠标当前的坐标-盒子到窗口边缘的距离;
  ​ 然后 元素本身.css( ‘左或右’, 偏移的距离+‘px’ );
  代码如下:
  html:

<div class="progress-box">
        <div class="progress-bar"></div>
        <div class="progress-btn"></div>
        <span class="progress-num">0</span>
    </div>
    <!-- box外部盒子 bar进度条 btn拖动按钮 num给外部一个显示拖动的数字	
     -->

CSS样式

.progress-box {
            width: 200px;
            position: relative;
            height: 30px;
            padding: 5px;
            background-color: #ccc;
        }

        .progress-bar {
            width: 94%;  /*宽度不是100%因为考虑到按钮本身也占据了15px的宽度 你设置100 按钮就会溢出;*/
            height: 10px;
            position: absolute;
            background-color: pink;
            border-radius: 10px;
            top: 5px;
        }

        .progress-btn {
            width: 15px;
            height: 15px;
            position: absolute;
            background-color: #fff;
            border-radius: 5px;
            top: 2.5px;
            left: 0;
        }

        .progress-btn:hover {
            background-color: orange;
            cursor: pointer;
        }

        .progress-num {
            /* text-align: center; */
            position: absolute;
            bottom: 0;
            left: 50%;
            font-size: 12px;
            transform: translateX(-50%);
        }

逻辑:本文使用到了JQ 逻辑也相对简单

$(function(){
	           let $progressBox = $(".progress-box");
            $progressBox.find(".progress-btn").on("mousedown", function (e) {
                // 防止冒泡 阻止默认行为
                var e = window.event || e;
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBabble = true;
                };
                // alert(123)

                console.log(e.pageX);
                //dix是盒子到窗口的位置
                var $diX = e.pageX - this.offsetLeft;
                var _self = this;
                $(document).on("mousemove.ghtx", function (e) {
                    // 计算当前 拖动的距离(点击位置的距离减去盒子到窗口的距离  ) 如果小于0就等0 大于185就等185
                    var $left = e.pageX - $diX;
                    var $x = $left < 0 ? 0 : $left > 185 ? 185 : $left;
                    // 拖动时 有数字反馈 把拖动的距离除以2 +%符号

                    // 这里应该使用兄弟选择器,这样即使复用,也不含干扰其他相同元素
                    $(_self).next().text(parseInt($x / 1.85) + '%');
                    // 然后再让  按钮进行相应的偏移 因为是绝对定位 直接便宜即可
                    $(_self).css('left', $x + 'px');
                });

                // 最后当鼠标抬起时  关闭以上俩个事件
                $(document).on("mouseup.ghtx",function(){
                    $(document).off("mousemove.ghtx mouseup.ghtx" )
                })
            })


})

以上就是案例的全部啦.感谢观看