可拖拽进度条（限制拖拽方向）

实现效果：

代码如下：

html:

<div id='speed_wrapper'>
    <p id='steep_text'></p>
    <div id='speed_content'></div>
    <span id='speed_handle'>></span>
</div>

css:

/* 可拖拽进度条 */
#application_wrapper4 #speed_wrapper{
    margin:30px 0 0 0 ;
    position:relative;;
    height:20px;
    background:#bbb;
    cursor:pointer;
    border-radius:20px;
}
#speed_content{
    position:absolute;
    top:0;
    left:0;
    width:0%;
    height:100%;
    background:#337ab7;
    border-radius:20px;
}
#speed_handle{
    color:#fff;
    text-align:center;
    border: 1px solid #337ab7;
    position:absolute;
    top:-4px;
    left:0;
    width:28px;
    height:28px;
    line-height:28px;
    border-radius:50%;
    background:#41dbdc;
    cursor:pointer;
}
#steep_text{
    position: absolute;
    top: -20px;
    left: 0;
    text-align:center;
}

js:

/**
 * //可拖拽进度条 只能向大数值方向拖动 
 * @param a 整数 number类型
 * @returns
 */

function onMousemove(a){
    var initX = (a === undefined ? 0 : a);//初始化值 整数形式 0-100  目的为了限制不可以向左拖拽
    $('#steep_text').text(initX+ '%');
    $('#speed_handle').css('left',(initX*$('#speed_wrapper').width()/100)-14+'px');
    $('#speed_content').width((initX*$('#speed_wrapper').width()/100)+'px');
    
    $('#speed_wrapper').on('mousedown',function(e){
        var Px    =    e.pageX;//记录鼠标x轴位置
        var X    =    Px - $('#speed_wrapper').offset().left;//句柄位置以及内div宽度
    
        if(X/$(this).width() > 0.99){
            X = $(this).width();
        }
        var X_    =    parseInt((X/$(this).width())*100,10);
        if(initX > X_){
            return false;
        }
        $('#speed_handle').css('left',X-14+'px');
        $('#speed_content').width(X+'px');
        $('#steep_text').text(X_+ '%');
        initX = X_;
        return false;
    });
    
    $('#speed_handle').on('click',function(){
        return false;
    });
    $('#speed_content').on('mousedown',function(){
        return false;
    });
    $('#speed_wrapper').on('mouseup',function(){
        $(document).unbind('mousemove');
        return false;
    });
    $('#speed_handle').on('mousedown',function(e){
        $(document).on('mousemove',function(e){
            var Px    =    e.pageX;//记录鼠标x轴位置
            var X    =    Px - $('#speed_wrapper').offset().left;//句柄位置以及内div宽度
            if(X >= $('#speed_wrapper').width()){
                X = $('#speed_wrapper').width()
            };
            if(X < 0){
                X = 0;
            }
            $('#speed_handle').css('left',X-14+'px');
            $('#speed_content').width(X+'px');
            var X_    =    parseInt((X/$('#speed_wrapper').width())*100,10);
            if(X_ < initX){
                X_ = initX;
                $('#speed_handle').css('left',$('#speed_wrapper').width()*X_/100 - 14+'px');
                $('#speed_content').width($('#speed_wrapper').width()*X_/100+'px');
            }
            $('#steep_text').text(X_+ '%');
            initX = X_;
        });
        $(document).on('mouseup',function(e){
            $(document).unbind('mousemove');
            return false;
        })
        return false;
    });
};

代码比较简单，只是有些小细节需要注意比如防止mousedown，mouseup事件冒泡，解除document事件绑定等，在此记下，提醒自己基础很重要！

来源：oschina

链接：https://my.oschina.net/u/4291852/blog/4040376

标签

wrapper