本文实例讲述了javascript使用面向对象实现的拖拽功能。分享给大家供大家参考,具体如下:
面向对象有个前提:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>面向对象的继承-1</title> <style> #div1 {width: 100px; height: 100px; background: red; position: absolute;} </style> <script> window.onload = function() { var odiv = document.getelementbyid('div1'); odiv.onmousedown = function(ev) { var ev = ev || event; var disx = ev.clientx - this.offsetleft; var disy = ev.clienty - this.offsettop; document.onmousemove = function(ev) { var ev = ev || event; odiv.style.left = ev.clientx - disx + 'px'; odiv.style.top = ev.clienty - disy + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; } } } </script> </head> <body> <div id="div1"></div> </body> </html>
把局部变量改成全局变量
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>面向对象的继承-2</title> <style> #div1 {width: 100px; height: 100px; background: red; position: absolute;} </style> <script> var odiv=null; var disx=0; var disy=0; window.onload = function() { odiv = document.getelementbyid('div1'); odiv.onmousedown = fndown; } function fnmove(ev) { var ev = ev || event; odiv.style.left = ev.clientx - disx + 'px'; odiv.style.top = ev.clienty - disy + 'px'; } function fnup() { document.onmousemove = document.onmouseup = null; } function fndown(ev) { var ev = ev || event; disx = ev.clientx - this.offsetleft; disy = ev.clienty - this.offsettop; document.onmousemove = fnmove; document.onmouseup =fnup; } </script> </head> <body> <div id="div1"></div> </body> </html>
引用块内容
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>面向对象的继承-2</title> <style> #div1 {width: 100px; height: 100px; background: red; position: absolute;} #div2 {width: 100px; height: 100px; background: red; position: absolute;top:120px;} </style> <script> window.onload=function(){ new drag('div1'); new drag('div2'); } function drag(id) { var _this=this; this.disx=0; this.disy=0; this.odiv = document.getelementbyid(id); this.odiv.onmousedown = function(){ _this.fndown() }; } drag.prototype.fndown=function (ev) { var ev = ev || event; var _this=this; this.disx = ev.clientx - this.odiv.offsetleft; this.disy = ev.clienty - this.odiv.offsettop; document.onmousemove = function(){ _this.fnmove(); }; document.onmouseup =function(){ _this.fnup(); }; } drag.prototype.fnmove=function(ev) { var ev = ev || event; this.odiv.style.left = ev.clientx - this.disx + 'px'; this.odiv.style.top = ev.clienty - this.disy + 'px'; } drag.prototype.fnup=function () { document.onmousemove = null; document.onmouseup = null } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>面向对象的继承-2</title> <style> #div1 {width: 100px; height: 100px; background: red; position: absolute;} #div2 {width: 100px; height: 100px; background: red; position: absolute;top:120px;} </style> <script> window.onload=function(){ new drag('div1'); new drag('div2'); } function drag(id) { var _this=this; this.disx=0; this.disy=0; this.odiv = document.getelementbyid(id); this.odiv.onmousedown = function(){ _this.fndown() }; } drag.prototype.fndown=function (ev) { var ev = ev || event; var _this=this; this.disx = ev.clientx - this.odiv.offsetleft; this.disy = ev.clienty - this.odiv.offsettop; document.onmousemove = function(){ _this.fnmove(); }; document.onmouseup =function(){ _this.fnup(); }; } drag.prototype.fnmove=function(ev) { var ev = ev || event; this.odiv.style.left = ev.clientx - this.disx + 'px'; this.odiv.style.top = ev.clienty - this.disy + 'px'; } drag.prototype.fnup=function () { document.onmousemove = null; document.onmouseup = null } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
感兴趣的朋友可以使用在线html/css/javascript代码运行工具:测试一下运行效果。
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript页面元素操作技巧总结》、《javascript操作dom技巧总结》、《javascript切换特效与技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论