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="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'; } } }; }