(function(global, factory) {
    "use strict";
    if (typeof define === "function" && define.amd) {
        // 支持 amd , require.js 格式
        define(function() {
            return (global.DragBar = factory(global, global.document));
        })
    } else if (typeof exports === 'object') {
        // 支持 exports es6模块化
        module.exports = factory(global, global.document);
    } else {
        // 浏览器模式
        global.DragBar = factory(global, global.document);
    }
})((typeof window !== "undefined" ? window : this), function(window, document) {
    "use strict";
    var DragBar = function(container, options) {
        const me = this;
        const origin = {};
        const mergeOptions = {};
        // 一些默认参数
        // 默认是水平方向放置
        const _options = {
            height: 500,
            width: 5,
            direction: "horizontal"
        }
        me._options = _options;
        // 保存原始参数
        for (let key in options) {
            origin[key] = options[key];
        }
        // 保存合并的数据touchend
        Object.assign(mergeOptions, _options, origin);

        me.origin = origin;
        me.mergeOptions = mergeOptions;

        // 获取传递进来的元素
        if (typeof container === 'string') {
            me.objString = container;
            me.container = document.querySelector(container);
            me.bar = me.container.children[0];
        } else if (typeof container == "object" && container.nodeType === 1) {
            me.container = container;
            me.bar = me.container.children[0];
        } else {
            throw new TypeError("the container must be a string for example `#container` or `.container` or a object for nodeType=1")
        }

        console.log(me);
        console.log(container);
        console.log(options);
    };
    // 初始化入口函数
    DragBar.prototype.init = function() {
        this.createMask(this.mergeOptions.cover);
        this.mouseDown();
        this.mouseUp();
        this.mouseMove();
        this.touchStart();
        this.touchMove();
        this.touchEnd();
    };
    // 创建蒙版
    DragBar.prototype.createMask = function(bool = false) {
        if (bool) {
            var w = this.mergeOptions.direction === "horizontal" ? 0 : this.container.offsetWidth;
            var h = this.mergeOptions.direction === "vertical" ? 0 : this.container.offsetHeight;
            var mask = document.createElement("div");
            mask.className = "mask";
            mask.id = "mask";
            mask.style.position = "absolute";
            mask.style.left = 0;
            mask.style.top = 0;
            mask.style.width = w + "px";
            mask.style.height = h + "px";
            mask.style.background = this.mergeOptions.background;
            this.mask = mask;
            this.container.appendChild(mask);
        }
    };
    // 事件绑定
    DragBar.prototype.bindEvent = function(element, type, fn) {
        if (element.addEventListener) {
            element.addEventListener(type, fn, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, fn);
        } else {
            element["on" + type] = null;
        }
    };
    // 事件移除
    DragBar.prototype.removeEvent = function(element, type, fn) {
        if (element.removeEventListener) {
            element.removeEventListener(type, fn, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, fn);
        } else {
            element["on" + type] = null;
        }
    };
    // pc端 鼠标按下
    DragBar.prototype.mouseDown = function() {
        var me = this;
        me._mousedown = function(e) {
            console.log("mousedown");

            me.startClientXY = {
                startX: e.clientX,
                startY: e.clientY,
                leftVal: e.clientX - me.bar.offsetLeft,
                topVal: e.clientY - me.bar.offsetTop
            }
            console.log(me.startClientXY);
            me.mouseMove();
        };
        this.bindEvent(me.bar, "mousedown", me._mousedown);
    };
    // 移动端 手指按下
    DragBar.prototype.touchStart = function() {
        var me = this;
        this.removeEvent(me.bar, 'mousedown', me._mousedown);
        this.removeEvent(document, 'mouseup', me._mouseup);
        me._touchstart = function(e) {
            console.log("touchstart", e);
            me.startTouchXY = {
                touchX: e.touches[0].pageX,
                touchY: e.touches[0].pageY,
                leftVal: e.touches[0].pageX - me.bar.offsetLeft,
                topVal: e.touches[0].pageY - me.bar.offsetTop
            };
            console.log('touchstart', me.startTouchXY);
            me.touchMove();
        };
        this.bindEvent(me.bar, "touchstart", me._touchstart);
    };
    // pc端 鼠标移动
    DragBar.prototype.mouseMove = function() {
        var me = this;
        me._mousemove = function(e) {
            console.log("mousemove");
            me.endClientXY = {
                endX: e.clientX,
                endY: e.clientY,
                barLeft: e.clientX - me.startClientXY.leftVal,
                barTop: e.clientY - me.startClientXY.topVal,
            }
            if (me.endClientXY.barLeft < 0) {
                me.endClientXY.barLeft = 0;
            } else if (me.endClientXY.barLeft > (me.container.offsetWidth - me.bar.offsetWidth)) {
                console.log(me.container.offsetWidth, me.bar.offsetWidth);
                console.log(me.endClientXY)
                me.endClientXY.barLeft = me.container.offsetWidth - me.bar.offsetWidth;
            }

            me.mask.style.width = me.endClientXY.barLeft + 'px';
            me.bar.style.left = me.endClientXY.barLeft + "px";
            console.log("已经走了" + parseInt(me.endClientXY.barLeft / (me.container.offsetWidth - me.bar.offsetWidth) * 100) + "%");
            console.log(me.endClientXY);
            //防止选择内容--当拖动鼠标过快时候,弹起鼠标,bar也会移动,修复bug
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        }
        this.bindEvent(document, "mousemove", me._mousemove)
    };
    // 移动端 手指移动
    DragBar.prototype.touchMove = function() {
        var me = this;
        this.removeEvent(document, 'mousemove', me._mousemove);
        me._touchmove = function(e) {
            me.moveTouchXY = {
                touchX: e.touches[0].pageX,
                touchY: e.touches[0].pageY,
                barLeft: e.touches[0].pageX - me.startTouchXY.leftVal,
                barTop: e.touches[0].pageY - me.startTouchXY.topVal,
            };
            if (me.moveTouchXY.barLeft < 0) {
                me.moveTouchXY.barLeft = 0;
            } else if (me.moveTouchXY.barLeft > (me.container.offsetWidth - me.bar.offsetWidth)) {
                me.moveTouchXY.barLeft = me.container.offsetWidth - me.bar.offsetWidth;
            }

            me.mask.style.width = me.moveTouchXY.barLeft + 'px';
            me.bar.style.left = me.moveTouchXY.barLeft + "px";
            console.log("已经走了" + parseInt(me.moveTouchXY.barLeft / (me.container.offsetWidth - me.bar.offsetWidth) * 100) + "%");
            //防止选择内容--当拖动鼠标过快时候,弹起鼠标,bar也会移动,修复bug
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            console.log("touchmove", me.moveTouchXY);
        };
        this.bindEvent(document, "touchmove", me._touchmove);

    };
    // pc端鼠标抬起
    DragBar.prototype.mouseUp = function() {
        var me = this;
        me._mouseup = function() {
            me.removeEvent(document, "mousemove", me._mousemove);
        };
        this.bindEvent(document, "mouseup", me._mouseup);
    };
    // 移动端 手指停止移动
    DragBar.prototype.touchEnd = function() {
        var me = this;
        // 在移动端移除pc端的mouseup事件
        this.removeEvent(document, 'mouseup', me._mouseup);

        me._touchend = function() {
            me.removeEvent(document, 'touchmove', me._mousemove);
        };
        this.bindEvent(document, "touchend", me._touchend);
    };

    console.log("开干了");
    // 内部初始化
    DragBar.init = function(container, options) {
        new DragBar(container, options).init();
    }
    window.DragBar = DragBar;
    return window.DragBar;
});

dragbar.js拖拽组件_移动端