简单的拖拽

拖拽的原理

移动后目标元素的位置 = dis + 目标元素的初始位置

(function (global) {

    function Drag(selector) {
        return new Drag.fn.init(selector);
    }

    Drag.fn = Drag.prototype = {
        constructor: Drag,
        init: function (selector) {
            // 声明2个变量用来保存鼠标初始位置的x，y坐标
            this.startX = 0;
            this.startY = 0;

            // 声明2个变量用来保存目标元素初始位置的x，y坐标
            this.sourceX = 0;
            this.sourceY = 0;
            this.$el = $el = document.querySelector(selector);
            if (!this.$el) {
                console.warn("请输入正确的元素");
                return;
            }
            this.transform = this.getTransform();
            this.setDrag();
        },
        setDrag() {
            this.$el.onmousedown = this.start.bind(this);
            this.$el.onmouseup = this.end.bind(this);
        },
        getTransform() {
            var transform = "",
                divStyle = document.createElement("div").style,
                // 可能涉及到的几种兼容性写法，通过循环找出浏览器识别的那一个
                transformArr = [
                    "transform",
                    "webkitTransform",
                    "MozTransform",
                    "msTransform",
                    "OTransform",
                ],
                i = 0,
                len = transformArr.length;

            for (; i < len; i++) {
                if (transformArr[i] in divStyle) {
                    // 找到之后立即返回，结束函数
                    return (transform = transformArr[i]);
                }
            }

            // 如果没有找到，就直接返回空字符串
            return transform;
        },
        getStyle(elem, property) {
            // ie通过currentStyle来获取元素的样式，其他浏览器通过getComputedStyle来获取
            return document.defaultView.getComputedStyle
                ? document.defaultView.getComputedStyle(elem, false)[property]
                : elem.currentStyle[property];
        },
        getTargetPos(elem) {
            var pos = { x: 0, y: 0 };
            var transform = this.transform;
            var getStyle = this.getStyle;
            if (transform) {
                var transformValue = getStyle(elem, transform);
                if (transformValue == "none") {
                    elem.style[transform] = "translate(0, 0)";
                    return pos;
                } else {
                    var temp = transformValue.match(/-?\d+/g);
                    return (pos = {
                        x: parseInt(temp[4].trim()),
                        y: parseInt(temp[5].trim()),
                    });
                }
            } else {
                if (getStyle(elem, "position") == "static") {
                    elem.style.position = "relative";
                    return pos;
                } else {
                    var x = parseInt(getStyle(elem, "left") ? getStyle(elem, "left") : 0);
                    var y = parseInt(getStyle(elem, "top") ? getStyle(elem, "top") : 0);
                    return (pos = {
                        x: x,
                        y: y,
                    });
                }
            }
        },
        setTargetPos(elem, pos) {
            var transform = this.transform;
            if (transform) {
                elem.style[transform] = "translate(" + pos.x + "px, " + pos.y + "px)";
            } else {
                elem.style.left = pos.x + "px";
                elem.style.top = pos.y + "px";
            }
            return elem;
        },
        start: function (event) {
            // 获取鼠标初始位置
            this.startX = event.pageX;
            this.startY = event.pageY;

            // 获取元素初始位置
            var pos = this.getTargetPos($el);

            this.sourceX = pos.x;
            this.sourceY = pos.y;
            // 绑定
            document.onmousemove = this.move.bind(this);
            document.onmouseup = this.end.bind(this);
        },
        move: function (event) {
            // 获取鼠标当前位置
            var currentX = event.pageX;
            var currentY = event.pageY;

            // 计算差值
            var distanceX = currentX - this.startX;
            var distanceY = currentY - this.startY;

            // 计算并设置元素当前位置
            this.setTargetPos(this.$el, {
                x: (this.sourceX + distanceX).toFixed(),
                y: (this.sourceY + distanceY).toFixed(),
            });
        },
        end: function (event) {
            document.onmousemove = null;
            document.onmouseup = null;
            // do other things
        }
    };

    Drag.fn.init.prototype = Drag.fn;

    global.Drag = global.$D = Drag;
})(window);

Drag(selector)