當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实现网页元素的拖拽效果
生活随笔
收集整理的這篇文章主要介紹了
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实现网页元素的拖拽效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mac安装python3
- 下一篇： 基于多种转换语义的图数据库查询