控制条拖拽

控制条拖拽是常见的前端功能，如播放器的音量条，昨天刚做了个，这里做个笔记。

控制条的动作就是鼠标按下，然后移动，松开鼠标动作结束，所以对控制条的按钮进行监听即可：

btn.onmousedown = function(event) {}

按照上面的说法，除了onmousedown 按下，还有移动鼠标即onmousemove，和鼠标松开onmouseup，如下：

btn.onmousedown = function(event) {
    document.onmousemove = function(event) {
        //...
    }
}
document.onmouseup = function() {
    document.onmousemove = null; //弹起鼠标销毁移动监听
}

上面的结构可以作为通用拖拽结构，注意onmousedown 监听对象是按钮，而鼠标移动和松开监听对象为文档对象document

完成基本结构后我们开始对onmousedown 监听进行编辑，监听的目的是为了获得控制条的有效值，即鼠标实时的横坐标减去控制条的横坐标，如下：

var barleft = 0;  //初始控制条有效值为0
btn.onmousedown = function(event) {
    var event = event || window.event; //兼容
    var leftVal = event.clientX - this.offsetLeft; //控制条横坐标 = 鼠标按下按钮时鼠标横坐标 - 按钮的偏移量
    document.onmousemove = function(event) {
        var event = event || window.event;
            barleft = event.clientX - leftVal; //控制条有效值 = 鼠标实时横坐标 - 控制条横坐标
            //......下面是修改对应样式（改变蓝条长度、改变按钮位置），略...
    }
}
document.onmouseup = function() {
    document.onmousemove = null; //弹起鼠标销毁移动监听
}

到此，拖拽的核心逻辑完成，下面是一些参考优化：

//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

示例demo可以查看：我的GitHub库，仅作为参考