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

来源：互联网发布：减肥打卡软件编辑：程序博客网时间：2024/05/21 09:26

下面的页面中放了两个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="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';            }        }    };}

3 0