首页 > 代码库 > JavaScript实现网页元素的拖拽效果

JavaScript实现网页元素的拖拽效果

以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置。

技术分享

技术分享

实现该效果的HTML页面代码例如以下所看到的:

<!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="http://www.mamicode.com/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>
</body>
</html>

外部JavaScript文件代码例如以下所看到的:

/**
 * 依据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‘;
            }
        }
    };
}


JavaScript实现网页元素的拖拽效果