js 滑块 slider 支持PC和移动端 制作甘特图用

(function () {
    'use strict';
    var demo = function (options) {
        //demo("options") 或者 new demo("options")都可以使用demo方法
        if (!(this instanceof demo)) { return new demo(options) };

        // 参数合并 extend方法体在下面
        this.options = this.extend({
            "minDiv": ""
        }, options);
        this.init();
        //初始化
    };
    //事件
    var ifBool = false; //判断鼠标是否按下
    var _currentMinDiv = null;
    var _currentvals = null;
    var _currentline = null;
    var start = function (e) {
        e.stopPropagation();
        ifBool = true;
        _currentMinDiv = this;
        _currentvals = this.children[0];
        _currentline = this.parentNode;
        //console.log("鼠标按下")
    }
    var move = function (e) {
        //console.log("鼠标拖动")
        if (ifBool) {
            if (!e.touches) {    //兼容移动端
                var x = e.clientX;
            } else {     //兼容PC端
                var x = e.touches[0].pageX;
            }
            var lineDiv_left = getPosition(_currentline).left; //长线条的横坐标
            var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
            var linemax = _currentline.attributes["attr_max"].nodeValue
            var linemin = _currentline.attributes["attr_min"].nodeValue;
            var maxleft = linemax / 100 * (_currentline.offsetWidth - 15);  //最大px
            var minleft = linemin / 100 * (_currentline.offsetWidth - 15);  //最小px
            if (minDiv_left > maxleft) {
                minDiv_left = maxleft;
            }
            else if (minDiv_left < minleft) {
                minDiv_left = minleft;
            }
            //设置拖动后小方块的left值
            _currentMinDiv.style.left = minDiv_left + "px";
            _currentvals.innerText = parseInt((minDiv_left / (_currentline.offsetWidth - 15)) * 100);
            //设置中间的线的颜色
            setColor(_currentline);
        }
    }
    var end = function (e) {
        //console.log("鼠标弹起")
        ifBool = false;
    }
    demo.prototype = {
        init: function () {
            this.options.minDiv.addEventListener("touchstart", start);
            this.options.minDiv.addEventListener("mousedown", start);
            var _this = this;
            _this.options.vals = _this.options.minDiv.children[0];
            _this.options.line = _this.options.minDiv.parentNode;
            _this.options.max = 100;
            _this.options.min = 0;
            _this.options.minDiv.parentNode.setAttribute('attr_max', 100);
            _this.options.minDiv.parentNode.setAttribute('attr_min', 0);
            _this.options.isdrop = true;
        },
        // 参数合并方法体
        extend: function (obj, obj2) {
            for (var key in obj2) {
                obj[key] = obj2[key];
                //    确保参数唯一
            }
            return obj
        },
        setval: function (val, optitle) {
            var _this = this;
            _this.options.vals.innerText = optitle == undefined ? val : optitle;
            var maxleft = _this.options.max / 100 * (_this.options.line.offsetWidth - 15);  //最大px
            var minleft = _this.options.min / 100 * (_this.options.line.offsetWidth - 15);  //最小px
            var theoryleft = val / 100 * (_this.options.line.offsetWidth - 15);   //理论px
            if (theoryleft > maxleft) {
                theoryleft = maxleft;
            }
            else if (theoryleft < minleft) {
                theoryleft = minleft;
            }
            //设置点的位置
            //_this.options.minDiv.style.left = val / 100 * (_this.options.line.offsetWidth - 15) + "px";
            _this.options.minDiv.style.left = theoryleft + "px";
            //设置中间线的颜色
            setColor(_this.options.line);
        },
        settitle: function (optitle) {
            var _this = this;
            _this.options.vals.innerText = optitle;
        },
        setmin: function (val) {
            var _this = this;
            _this.options.min = val;
            _this.options.line.setAttribute('attr_min', val);
        },
        setmax: function (val) {
            var _this = this;
            _this.options.max = val;
            _this.options.line.setAttribute('attr_max', val);
        },
        prodrop: function (isshow) {
            if (isshow) {
                this.options.minDiv.addEventListener("touchstart", start);
                this.options.minDiv.addEventListener("mousedown", start);
            }
            else {
                this.options.minDiv.removeEventListener("touchstart", start);
                this.options.minDiv.removeEventListener("mousedown", start);
            }
        },
        showtip: function (isshow) {
            if (isshow) {
                this.options.vals.style.display = "block";
            }
            else {
                this.options.vals.style.display = "none";
            }
        }
    }
    //暴露对象
    window.supslider = demo;
    //拖动
    window.addEventListener("touchmove", move);
    window.addEventListener("mousemove", move);
    //鼠标松开
    window.addEventListener("touchend", end);
    window.addEventListener("mouseup", end);

    //获取元素的绝对位置
    function getPosition(node) {
        var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
        var top = node.offsetTop;
        var current = node.offsetParent; // 取得元素的offsetParent
        // 一直循环直到根元素

        while (current != null) {
            left += current.offsetLeft;
            top += current.offsetTop;
            current = current.offsetParent;
        }
        return {
            "left": left,
            "top": top
        };
    }

    //设置中间线的颜色
    function setColor(line) {
        var pointL = line.children[1].style.left != "" ? parseFloat(line.children[1].style.left.substr(0, line.children[1].style.left.indexOf("px"))) : 0;
        var pointR = line.children[2].style.left != "" ? parseFloat(line.children[2].style.left.substr(0, line.children[2].style.left.indexOf("px"))) : 0;
        var lineHLeft = pointL > pointR ? pointR : pointL;
        var lineHWidth = pointL > pointR ? (pointL - pointR) : (pointR - pointL);
        line.children[0].style.left = lineHLeft + "px";
        line.children[0].style.width = lineHWidth + "px";
    }
}());

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>鼠标拖动小方块</title>
    <style type="text/css">
        .lineDiv {
            position: relative;
            height: 3px;
            background: #bfbfbf;
            width: 300px;
            margin: 50px auto;
        }

            .lineDiv .minDiv {
                /*position: absolute;
                top: -5px;
                left: 0;
                width: 15px;
                height: 15px;
                background: green;
                cursor: pointer;*/
                position: absolute;
                top: -8px;
                left: 0;
                width: 12px;
                height: 12px;
                background: #ffffff;
                cursor: pointer;
                border-radius: 15px;
                border: 3px solid rgb(0, 150, 136);
            }

                .lineDiv .minDiv .vals {
                    position: absolute;
                    font-size: 20px;
                    top: -45px;
                    left: -10px;
                    width: auto;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    background: #ccc;
                }

                    .lineDiv .minDiv .vals:after {
                        content: "";
                        width: 0px;
                        height: 0px;
                        border-top: 6px solid blue;
                        border-left: 6px solid transparent;
                        border-right: 6px solid transparent;
                        border-bottom: 6px solid transparent;
                        display: block;
                        margin-left: 11px;
                    }

        .layui-slider-tips {
            position: absolute;
            top: -42px;
            z-index: 66666666;
            white-space: nowrap;
            display: none;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            color: #FFF;
            background: #000;
            border-radius: 3px;
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            left: 50%;
            display: block;
        }

            .layui-slider-tips:after {
                content: '';
                position: absolute;
                bottom: -12px;
                left: 50%;
                margin-left: -6px;
                width: 0;
                height: 0;
                border-width: 6px;
                border-style: solid;
                border-color: #000 transparent transparent;
            }

        .layui-slider-bar {
            background: rgb(0, 150, 136);
            border-radius: 3px;
            position: absolute;
            height: 100%;
        }
    </style>
</head>

<body>
    <center>
        @*<h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>*@
    </center>
    <div id="lineDiv1" class="lineDiv">
        <div class="layui-slider-bar"></div>
        <div id="minDiv11" class="minDiv">
            <div class="layui-slider-tips">0</div>
        </div>
        <div id="minDiv12" class="minDiv">
            <div class="layui-slider-tips">0</div>
        </div>
    </div>
    <div id="lineDiv2" class="lineDiv">
        <div class="layui-slider-bar"></div>
        <div id="minDiv21" class="minDiv">
            <div class="layui-slider-tips">0</div>
        </div>
        <div id="minDiv22" class="minDiv">
            <div class="layui-slider-tips">0</div>
        </div>
    </div>
    <div>
        <input value="设置50" id="setvalue" onclick="setValue(50)" type="button" />
        <input value="设置70" id="setvalue" onclick="setValue(70,'20191010')" type="button" />
        <input value="设置最小20" id="setvalue" onclick="setMin(20)" type="button" />
        <input value="设置最大50" id="setvalue" onclick="setMax(50)" type="button" />
        <input value="设置tip" id="setvalue" onclick="setTitle('新tip123~~~')" type="button" />
        <input value="开启拖拽" id="setvalue" onclick="proDrop(true)" type="button" />
        <input value="禁止拖拽" id="setvalue" onclick="proDrop(false)" type="button" />
        <input value="显示tip" id="setvalue" onclick="showTip(true)" type="button" />
        <input value="隐藏tip" id="setvalue" onclick="showTip(false)" type="button" />
    </div>
    <script src="~/scripts/SupSlider.js"></script>
    <script>
        function setValue(val, title) {
            minDiv11.setval(val, title);
        }
        function setMin(val) {
            minDiv11.setmin(val);
        }
        function setMax(val) {
            minDiv11.setmax(val);
        }
        function setTitle(val) {
            minDiv11.settitle(val);
        }
        function proDrop(isshow) {
            minDiv11.prodrop(isshow);
            minDiv12.prodrop(isshow);
        }
        function showTip(isshow) {
            minDiv11.showtip(isshow);
            minDiv12.showtip(isshow);
        }
        var minDiv11;
        var minDiv12;
        var minDiv21;
        var minDiv22;
        window.onload = function () {
            minDiv11 = supslider({ "minDiv": document.getElementById('minDiv11') });
            minDiv12 = supslider({ "minDiv": document.getElementById('minDiv12') });
            minDiv21 = supslider({ "minDiv": document.getElementById('minDiv21') });
            minDiv22 = supslider({ "minDiv": document.getElementById('minDiv22') });
        }
    </script>
</body>

</html>