国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

JS面向對象編程實現的拖拽功能案例詳解

瀏覽:120日期:2024-05-22 13:06:49

本文實例講述了JS面向對象編程實現的拖拽功能。分享給大家供大家參考,具體如下:

原始的面向過程代碼:

<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <style> #box {width: 100px; height: 100px; background: blue; position: absolute; } </style> <title>拖拽</title> <script> var oBox=null; var disX=0; var disY=0; window.onload=function(){oBox=document.getElementById(’box’);oBox.onmousedown=fnDown; }; //鼠標按下事件 function fnDown(ev){var oEvent = ev||event;disX = oEvent.clientX - oBox.offsetLeft;disY = oEvent.clientY - oBox.offsetTop;document.onmousemove = fnMove;document.onmouseup = fnUp; } //鼠標移動事件 function fnMove(ev){var oEvent=ev||event;oBox.style.left = oEvent.clientX - disX + ’px’;oBox.style.top = oEvent.clientY - disY + ’px’; } //鼠標抬起事件 function fnUp(){document.onmousemove = null;document.onmouseup = null; } </script> </head> <body> <div id='box'></div></body></html>

下面是面向對象的代碼

drag.js

/** * 拖拽 * @param {Object} id div的id */function Drag(id){ this.oBox = document.getElementById(id); this.disX = 0; this.disY = 0; var _this = this; this.oBox.onmousedown = function(){ _this.fnDown(); }}//鼠標按下Drag.prototype.fnDown = function(ev){ var oEvent = ev || event; this.disX = oEvent.clientX - this.oBox.offsetLeft; this.disY = oEvent.clientY - this.oBox.offsetTop; var _this = this; document.onmousemove = function(){ _this.fnMove(); }; document.onmouseup = function(){ _this.fnUp(); };}//鼠標移動Drag.prototype.fnMove = function(ev){ var oEvent= ev || event; this.oBox.style.left = oEvent.clientX - this.disX + ’px’; this.oBox.style.top = oEvent.clientY - this.disY + ’px’;}//鼠標抬起Drag.prototype.fnUp = function(){ document.onmousemove = null; document.onmouseup = null;}

drag.html

<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <style> div {position: absolute; } </style> <title>拖拽</title> <script type='text/javascript' src='http://www.cgvv.com.cn/js/drag.js' ></script> <script> window.onload = function(){var drag1 = new Drag('box1');var drag1 = new Drag('box2'); }; </script> </head> <body> <div style='background: red;width: 200px;height: 200px;'></div> <div style='background: blue;width: 100px;height: 100px;'></div></body></html>

JS面向對象編程實現的拖拽功能案例詳解JS面向對象編程實現的拖拽功能案例詳解

此拖拽有一個問題,就是沒有控制拖拽出邊界的問題。但我們又不想去修改代碼,那我們怎么做?學過java的應該都知道可以寫一個子類來做一些更加具體的操作,又保留了父類的功能,就是繼承。

html

<script type='text/javascript' src='http://www.cgvv.com.cn/js/drag.js' ></script><script type='text/javascript' src='http://www.cgvv.com.cn/js/dragLimit.js' ></script><script> window.onload = function(){ var drag1 = new Drag('box1'); var drag1 = new DragLimit('box2');//藍色是不會超出邊界的 };</script><body> <div style='background: red;width: 200px;height: 200px;'></div> <div style='background: blue;width: 100px;height: 300px;'></div></body>

DragLimit.js:DragLimit繼承自Drag,控制了不能出邊界

/** * 限制邊界的拖拽,繼承自Drag * @param {Object} id */function DragLimit(id){ Drag.call(this, id);}//繼承方法for(var p in Drag.prototype){ DragLimit.prototype[p] = Drag.prototype[p];}/** * 覆寫父類的鼠標移動方法,控制不能移出邊界 */DragLimit.prototype.fnMove = function(ev){ var oEvent= ev || event; var left = oEvent.clientX - this.disX; var top = oEvent.clientY - this.disY; //控制邊界 if(left < 0){ left = 0; } else if(left > document.documentElement.clientWidth-this.oBox.offsetWidth){ left = document.documentElement.clientWidth-this.oBox.offsetWidth; } if(top <= 0){ top = 0; } else if(top > document.documentElement.clientHeight-this.oBox.offsetHeight){ top = document.documentElement.clientHeight-this.oBox.offsetHeight; } this.oBox.style.left = left + ’px’; this.oBox.style.top = top + ’px’;}

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 成人黄色免费网站 | 欧美日韩一区在线观看 | 久久九九国产 | 久久一日本道色综合久久 | 成人国产网站 | 97视频免费公开成人福利 | 99久久精品国产片 | 美女一级ba大片免色野外 | 日韩一中文字幕 | 欧美成a| 黄色三级三级三级免费看 | 国内一级野外a一级毛片 | 久草在线观看视频 | 国产播放 | 精品一区二区三区在线播放 | 国产高清美女一级a毛片久久 | 成年人免费网站视频 | 久久精品国产欧美日韩亚洲 | 92国产福利久久青青草原 | 国产乱码精品一区二区三区中 | 日韩在线一区二区三区免费视频 | 黄色一级毛片网站 | 成年人免费软件 | 最新亚洲精品国自产在线 | 亚洲欧美一区二区三区久本道 | 一级毛片免费完整视频 | 亚洲欧美视频 | 亚洲风情第一页 | 亚洲国产精品线播放 | 欧美日韩在线视频免费完整 | 久久香蕉国产线看观看精品yw | 日韩毛片久久91 | 偷拍精品视频一区二区三区 | 大胆gogo999亚洲肉体艺术 | 欧美成人午夜毛片免费影院 | 日韩 亚洲 制服 欧美 综合 | 女人张开腿 让男人桶视频 女人张开腿等男人桶免费视频 | 欧美性videofree精品 | 日韩在线 | 中文 | 91亚洲精品一区二区在线观看 | 欧美69xx |