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     }

相关阅读:
Padding和父子继承宽高之间的关系
 Js实例——模态框弹出层
 Java——异常谜题
 BZOJ 2743 【HEOI2012】采花
 BZOJ 4614 【WF2016】 Oil
BZOJ 1004 【HNOI2008】 Cards
codevs 2495 水叮当的舞步
 BZOJ 1227 【SDOI2009】虔诚的墓主人
 BZOJ 3505 【CQOI2014】数三角形
 BZOJ 4423 【AMPPZ2013】 Bytehattan
原文地址：https://www.cnblogs.com/clouds008/p/2506951.html

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

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