class Drag {

    constructor(selector) {
        this.elem = typeof selector === 'object' ? selector : document.querySelector(selector);
        this.mouse_x = 0;
        this.mouse_y = 0;
        this.elem_x = 0;
        this.elem_y = 0;
        this.init();
        this.transform = this.getTransform();
    }

    init() {
        this.setDrag();
    }

    setDrag() {
        let self = this;
        this.elem.addEventListener('mousedown', _start, false)

        /**
         * @description 记录按下鼠标时的位置,同时绑定mousemove和mouseup事件
         * @param event
         */
        function _start(event) {
            self.mouse_x = event.pageX;
            self.mouse_y = event.pageY;

            let position = self.getElemPosition();

            self.elem_y = position.y;
            self.elem_x = position.x;

            document.addEventListener("mousemove", _move, false);
            document.addEventListener("mouseup", _end, false);
        }

        function _move(event) {
            let target_mouse_x = event.pageX,
                target_mouse_y = event.pageY,
                distance_x = target_mouse_x - self.mouse_x,
                distance_y = target_mouse_y - self.mouse_y,
                position = self.getElemPosition();

            position.x = self.elem_x + distance_x;
            position.y = self.elem_y + distance_y;

            self._setElemPosition(position)
        }

        function _end(event) {
            document.removeEventListener("mousemove", _move);
            document.removeEventListener("mouseup", _end);
        }
    }

    _setElemPosition(position) {
        if (this.transform) {
            this.elem.style[this.transform] = `translate(${position.x}px,${position.y}px)`
        } else {
            this.elem.style['left'] = `${position.x}px`;
            this.elem.style['right'] = `${position.y}px`;
        }
    }

    getElemPosition() {
        let position = {x: 0, y: 0};
        let elem = this.elem;
        if (this.transform) {
            this.isTransform(elem, position)
        } else {
            this.isPosition(elem, position)
        }
        return position

    }

    isTransform(elem, position) {
        let styleValue = this.getStyleValue(elem, this.transform);
        if (styleValue !== 'none') {
            let styleValueArr = styleValue.match(/-?\d+/g);
            position.x = parseInt(styleValueArr[4].trim());
            position.y = parseInt(styleValueArr[5].trim());
        }
    }

    isPosition(elem, position) {
        if (this.getStyleValue(elem, 'position') === 'static') {
            this.elem.style['position'] = 'relative'
        } else {
            position.x = parseInt(this.getStyleValue(elem, 'left') ? this.getStyleValue(elem, 'left') : 0);
            position.y = parseInt(this.getStyleValue(elem, 'right') ? this.getStyleValue(elem, 'right') : 0);
        }
    }

    getTransform() {
        let transform = '',
            transforms = ["transform", "webkitTransform", "MozTransform", "msTransform", "OTransform"],
            len = transforms.length,
            index = 0,
            bodyStyle = document.body.style;
        for (; index < len; index++) {
            if (transforms[index] in bodyStyle) {
                return transforms[index]
            } else {
                return transform
            }
        }
    }

    getStyleValue(elem, property) {
        if (document.defaultView.getComputedStyle) {
            return document.defaultView.getComputedStyle(elem, false)[property]
        } else {
            return elem.currentStyle[property]
        }
    }
}