當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2025/7/14 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript实现网页元素的拖拽效果小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

以下的頁(yè)面中放了兩個(gè)div，能夠通過(guò)鼠標(biāo)拖拽這兩個(gè)元素到任何位置。

實(shí)現(xiàn)該效果的HTML頁(yè)面代碼例如以下所看到的：

<!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文件代碼例如以下所看到的：

/*** 依據(jù)id獲取頁(yè)面元素* @param id* @returns {HTMLElement}*/ function $(id) {return document.getElementById(id); }/*** 創(chuàng)建可拖拽對(duì)象的工廠方法*/ 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';}}}; }

總結(jié)

以上是生活随笔為你收集整理的JavaScript实现网页元素的拖拽效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。