欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

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

发布时间：2025/7/14 javascript 63 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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';}}}; }

总结

以上是生活随笔为你收集整理的JavaScript实现网页元素的拖拽效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。