Js 实现拖拽功能（原生） 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #xixi {
            width:200px; height: 200px; position:absolute;
            left: 50px; top: 50px; background-color: lightcyan;
        }
        #haha {
            position:absolute; left:300px; top:300px;
            background-color: yellow; width:200px; height: 200px;
        }

    </style>
    <!--<script type="text/javascript" src="js/mylib.js"></script>-->
    <script type="text/javascript">
        window.onload = function() {
            var obj1 = createDraggableObject();
            var obj2 = createDraggableObject();
            obj1.init($('xixi'));
            obj2.init($('haha'));
        };
    </script>

</head>
<body>
<div id="xixi">Fuck!</div>
<div id="haha">Shit!</div>
<script>
    /**
     * 根据id获取页面元素
     * @param id
     * @returns {HTMLElement}
     */
    function $(id) {
        return document.getElementById(id);
    }

    /**
     * 创建可拖拽对象的工厂方法
     */
    function createDraggableObject() {
        return {
            obj: null, left: 0, top: 0,
            oldX: 0, oldY: 0, isMouseLeftButtonDown: false,
            init: function (obj) {
                this.obj = obj;
                var that = this;
                this.obj.onmousedown = function (args) {
                    var evt = args || event;
                    this.style.zIndex = 100;
                    that.isMouseLeftButtonDown = true;
                    that.oldX = evt.clientX;
                    that.oldY = evt.clientY;
                    if (this.currentStyle) {
                        that.left = parseInt(this.currentStyle.left);
                        that.top = parseInt(this.currentStyle.top);
                    }
                    else {
                        var divStyle = document.defaultView.getComputedStyle(this, null);
                        that.left = parseInt(divStyle.left);
                        that.top = parseInt(divStyle.top);
                    }
                };
                this.obj.onmousemove = function (args) {
                    that.move(args || event);
                };
                this.obj.onmouseup = function () {
                    that.isMouseLeftButtonDown = false;
                    this.style.zIndex = 0;
                };
            },
            move: function (evt) {
                if (this.isMouseLeftButtonDown) {
                    var dx = parseInt(evt.clientX - this.oldX);
                    var dy = parseInt(evt.clientY - this.oldY);
                    this.obj.style.left = (this.left + dx) + 'px';
                    this.obj.style.top = (this.top + dy) + 'px';
                }
            }
        };
    }
</script>
</body>
</html>

 

posted @ 2017-06-05 21:59  时间脱臼  阅读(374)  评论(0)    收藏  举报