首页 > 编程语言 >JavaScript实现网页元素的拖拽效果

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

时间:2023-06-20 14:06:51浏览次数:42  
标签:function obj top JavaScript var 网页 evt 拖拽 left


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

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

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

实现该效果的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="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">Fuc!</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';
            }
        }
    };
}




标签:function,obj,top,JavaScript,var,网页,evt,拖拽,left
From: https://blog.51cto.com/u_16166070/6522178

相关文章