js-drag drag package

; (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,
        the init: function() {
             // need to do something when initializing 
            the this .setDrag (); 
        }, 
        getStyle: function (Property) {
             // only used to get the properties of the current element, similar to the getName; 
            return document.defaultView.getComputedStyle
                 the Document? .defaultView.getComputedStyle ( the this .elem, to false ) [Property] 
                : the this .elem.currentStyle [Property] 
        }, 
        // acquiring position information of the current element of 
        the 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);
            }

            functionMove (Event) {
                 var CurrentX = event.pageX;
                var CurrentY = event.pageY; 

                var distanceX = CurrentX - self.startX;
                 var distanceY = CurrentY - self.startY; 

                // window width height 
                var H = window.innerHeight;
                 var = W window.innerWidth; 

                // element width height 
                var DW = document.getElementById ( 'Drag' ) .offsetWidth;
                 var DH = document.getElementById ( 'Drag' ) .offsetHeight; 

                // boundary determination 
                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.= Tensile Tensile;
})();

View Code

// references

<!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

 

// reference address

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