js-drag 拖拽封装

; (function () {
    // 调用私有方法，获取transform
    var transform = getTransform();

    function Drag(selector) {
        this.elem = typeof selector === 'object' ? selector : document.getElementById(selector);
        this.startX = 0;
        this.startY = 0;
        this.sourceX = 0;
        this.sourceY = 0;
        this.init();
    }

    // 原型
    Drag.prototype = {
        constructor: Drag,
        init: function () {
            // 初始化时需要做些什么事
            this.setDrag();
        },
        getStyle: function (property) {
            // 仅用于获取当前元素的属性，类似于getName;
            return document.defaultView.getComputedStyle
                ? document.defaultView.getComputedStyle(this.elem, false)[property]
                : this.elem.currentStyle[property]
        },
        // 获取当前元素的位置信息
        getPosition: function () {
            var pos = { x: 0, y: 0 };
            if (transform) {
                var transformValue = this.getStyle(transform);
                if (transformValue === 'none') {
                    this.elem.style[transform] = 'translate(0,0)';
                } else {
                    var temp = transformValue.match(/-?\d+/g);
                    pos = {
                        x: parseInt(temp[4].trim()),
                        y: parseInt(temp[5].trim())
                    };
                }
            } else {
                if (this.getStyle('position') == 'static') {
                    this.elem.style.position = 'relative';
                } else {
                    pos = {
                        x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0),
                        y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0)
                    }
                }
            }
            return pos;
        },
        setPostion: function (pos) {
            if (transform) {
                this.elem.style[transform] = 'translate(' + pos.x + 'px, ' + pos.y + 'px)';
            } else {
                this.elem.style.left = pos.x + 'px';
                this.elem.style.top = pos.y + 'px';
            }
        },

        // 该方法用来绑定事件
        setDrag: function () {
            var self = this;
            this.elem.addEventListener('mousedown', start, false);
            function start(event) {
                self.startX = event.pageX;
                self.startY = event.pageY;

                var pos = self.getPosition();

                self.sourceX = pos.x;
                self.sourceY = pos.y;

                document.addEventListener('mousemove', move, false);
                document.addEventListener('mouseup', end, false);
            }

            function move(event) {
                var currentX = event.pageX;
                var currentY = event.pageY;

                var distanceX = currentX - self.startX;
                var distanceY = currentY - self.startY;

                // 窗体宽度高度
                var h = window.innerHeight;
                var w = window.innerWidth;

                // 元素宽度高度
                var dw = document.getElementById('drag').offsetWidth;
                var dh = document.getElementById('drag').offsetHeight;

                // 边界判断
                self.setPostion({
                    x: ((self.sourceX + distanceX) <= 0 ? 0 : ((self.sourceX + distanceX) >= w - dw) ? w - dw : self.sourceX + distanceX).toFixed(),
                    y: ((self.sourceY + distanceY) <= 0 ? 0 : ((self.sourceY + distanceY) >= h - dh) ? h - dh : self.sourceY + distanceY).toFixed()
                })
            }

            function end(event) {
                document.removeEventListener('mousemove', move);
                document.removeEventListener('mouseup', end);
                // do other things
            }
        }
    }

    // 私有方法，获取transform的兼容写法
    function 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;
    }
    // 一种对外暴露的方式
    window.Drag = Drag;
})();

View Code

// 引用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #drag {
            width: 100px;
            height: 100px;
            background-color: firebrick;
            cursor: move;
        }
    </style>
</head>

<body>
    <div id="drag"></div>
    <script src="js/drag.js"></script>
    <script>
        new Drag('drag');
    </script>
</body>

</html>

View Code

// 参考地址

https://www.jianshu.com/p/b3dee0e84454