當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Js实现拖拽 --面向对象封装( 超详细中文注释)

發布時間：2023/12/19 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Js实现拖拽 --面向对象封装( 超详细中文注释) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這類文章網上的很多。我只是做了詳細的中文注釋。便于大家理解。 --廢話不多說直接上源碼 ?（用到的圖片請隨便自己代替）

javascript代碼部分:

1 /**js拖拽特效封裝*/ 2 //關于js面向對象編程詳細http://sd.csdn.net/a/20120507/2805362.html 3 var Drag = { //Drag:拖拽 --用逗號分割。（屬性和方法合為一條語句） 4 //聲明一個obj屬性代表那一個層當前對象，初始值為空。 5 obj:null, //聲明obj是為了后面停止移動的函數處理。方便處理 6 7 //初始化操作 --參數id代表對象的ID 8 init:function(id){ 9 //聲明對象o，把對象賦給o 10 var o = document.getElementById(id); 11 //當對象觸發‘鼠標按鈕被按下’事件，就調用拖拽方法。 12 o.onmousedown = Drag.start; //對象.方法 13 }, 14 15 //拖拽函數 --事件 “e”代表觸發的事件源（沒申明的字段） 16 start:function(e){ 17 //連環賦值，Drag.obj當全局使用。o本函數的內部使用，局部變量 18 var o = Drag.obj = this; //this當前調用它的對象 19 //記錄鼠標按下的位置(坐標) 20 o.lastMouseX = Drag.getEvent(e).x; 21 o.lastMouseY = Drag.getEvent(e).y; 22 //當對象觸發‘鼠標被移動’事件，就調用移動處理函數 --對象范圍是document所包含的對象 23 document.onmousemove = Drag.move; 24 //當對象觸發‘鼠標按鍵被松開’事件，就調用停止移動處理函數 --對象范圍是document所包含的對象 25 document.onmouseup = Drag.end; 26 27 }, 28 29 //移動處理 30 move:function(e){ 31 //把觸發對象賦給局部變量 32 var o = Drag.obj; 33 34 /*記錄鼠標移動的距離*/ 35 //--用當前的位置減去鼠標按下的位置 36 var dx = Drag.getEvent(e).x - o.lastMouseX; 37 var dy = Drag.getEvent(e).y - o.lastMouseY; 38 39 /*記錄層改移動后的邊距 --等于層的邊距加上鼠標移動的距離*/ 40 //因為element.style.left通常返回的結果是'200px'的形式，所以要用parseInt轉化 41 42 /* 43 var left = parseInt(o.style.left) + dx; 44 var top = parseInt(o.style.top) + dy; --只能用于內嵌樣式讀取值 45 */ 46 var left = parseInt(o.offsetLeft) + dx; 47 var top = parseInt(o.offsetTop) + dy; 48 49 /*對象(層)移動判斷界限處理*/ 50 //記錄游覽器的可見區域寬度 51 var browserX = document.documentElement.clientWidth; 52 var browserY = document.documentElement.clientHeight; //可見區域高度 53 //界限判斷 54 if(left < 0) 55 { 56 Drag.end; //結束移動。 57 return false; 58 } 59 if(left > browserX-parseInt(o.offsetWidth)) 60 { 61 Drag.end; //結束移動。 62 return false; 63 } 64 if(top < 0) 65 { 66 Drag.end; //結束移動。 67 return false; 68 } 69 if(top > browserY-parseInt(o.offsetHeight)) 70 { 71 Drag.end; //結束移動。 72 return false; 73 } 74 o.style.left = left; //更新對象層的邊距 75 o.style.top = top; 76 //更新鼠標當前位置 77 o.lastMouseX = Drag.getEvent(e).x; 78 o.lastMouseY = Drag.getEvent(e).y; 79 80 }, 81 82 //停止移動處理 83 end:function(e){ 84 //事件觸發調用函數為null 85 document.onmousemove = null; //初始化。停止處理 86 document.onMouseup = null; 87 //對象層初始化為空 88 Drag.obj = null; 89 }, 90 91 //輔助函數-處理IE和FF不同的Event對象模型 --處理IE和火狐的兼容性 92 getEvent:function(e){ 93 //獲取游覽器名字 94 var browserName = navigator.appName; 95 if(browserName == "Firefox"){ 96 if(typeof e.x == 'undefined'){ //保證e是沒賦值的，就把當前事件對象給e 97 e.x = e.layerX; //layerX火狐游覽器支持的層的X坐標表示 98 } 99 if(typeof e.y == 'undefined'){ 100 e.y = e.layerY; //當前Y坐標 101 } 102 }else{ 103 if (typeof e == 'undefined'){ 104 e = window.event; //當前事件對象 105 } 106 } 107 return e; //返回e 108 } 109 110 }; //因為這是封裝js類，當一個語句使用所以要有分號 111 112 Drag.init("cmd_con");

html代碼部分：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>javascript模擬Cmd</title> 6 <link rel="stylesheet" type="text/css" href="css/cmd.css" /> 7 </head> 8 9 <body> 10 <div id="centered"> 11 <div id="cmd_con"> 12 <div id="cmd_min"></div> 13 <div id="cmd_close"></div> 14 <div id="cmd_input"><textarea></textarea></div> 15 </div> 16 </div> 17 </body> 18 <script type="text/javascript" src="js/cmd.js"></script> 19 </html>

css代碼部分：

1 body{ 2 background:url(../image/dot.gif); 3 background-attachment:fixed /*背景圖片固定在游覽器，不隨頁面滾動*/ 4 } 5 #centered{ width:1000px; margin:0px auto;} 6 7 /*cmd的界面設置*/ 8 #cmd_con{ 9 width:660px; background:url(../image/cmd_bg.jpg) no-repeat; 10 position:absolute; height:447px; 11 left:130px;top:100px; cursor:move; 12 } 13 #cmd_min{ 14 background:url(../image/cmd_min.jpg) no-repeat; width:16px; height:14px; position:absolute; 15 top:6px; left:602px; cursor:hand; 16 } 17 #cmd_close{ 18 background:url(../image/cmd_close.jpg) no-repeat; width:16px; height:14px; position:absolute; 19 top:6px; left:638px; cursor:hand; 20 } 21 #cmd_input{ 22 overflow:hidden;position:absolute; 23 top:22px; left:4px; 24 } 25 #cmd_input textarea{ 26 width:648px; height:413px; background-color:#000000; color:#00FF00; 27 }

轉載于:https://www.cnblogs.com/clouds008/archive/2012/05/17/2506951.html

總結

以上是生活随笔為你收集整理的Js实现拖拽 --面向对象封装( 超详细中文注释)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。