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     }

 

你可能感兴趣的:(面向对象)