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实现拖拽 --面向对象封装( 超详细中文注释)相关推荐

超详细中文注释的GPT2新闻标题生成项目
超详细中文注释的GPT2新闻标题生成项目:https://zhuanlan.zhihu.com/p/338171330 笔者开源了一个带有超详细中文注释的GPT2新闻标题生成项目. 该项目参考了GPT ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
js实现拖拽+碰撞+重力
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
李炎恢 js教程拖拽上思路解析
李炎恢再讲js教程拖拽上讲到一个登录框,通过鼠标移动登录框到浏览器各个地方,我们现在对李炎恢的怎么想出进行分析: 问题期望是什么? 1.我们通过鼠标点击登录框,然后登录框被移动,松开鼠标,停止移动 ...
js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
原生JS实现拖拽垂直进度条
先看效果图代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...

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

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

最新文章

热门文章