拖拽的基本函数（已有限制范围和修复浏览器默认行为以及磁性吸附、碰撞检测、改变层大小、模拟滚动条）

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 { 100px; height: 100px; background: red; position: absolute;}
 8 #img1 { position: absolute;}
 9 </style>
10 <script>
11 window.onload = function() {
12     
13     var oDiv = document.getElementById('div1');
14     var oImg = document.getElementById('img1');
15     
16     drag(oImg);
17     
18     drag(oDiv);
19     
20     function drag(obj) {
21         
22         obj.onmousedown = function(ev) {
23             var ev = ev || event;
24             // 获得鼠标按下的时候 鼠标距离元素最左边和最上边的距离
25             var disX = ev.clientX - this.offsetLeft;
26             var disY = ev.clientY - this.offsetTop;
27             //设置非标准IE的全局捕获事件。 修复非标准IE下的 禁止 浏览器默认拖动 选中文字 和 //图片的问题。（将浏览器默认的事件抢过来，不让其执行默认行为）
28             //非标准IE下的全局捕获:    当一个元素设置全局捕获的时候，它会监听所有的事件，并且。将发生在其他元素身上的事件全部抢过来，
29             // 如果自己身上有绑定 相同的事件处理函数，则执行。
30             if ( obj.setCapture ) {
31                 obj.setCapture();
32             }
33             
34             document.onmousemove = function(ev) {
35                 var ev = ev || event;
36                 
37                 var L = ev.clientX - disX;
38                 var T = ev.clientY - disY;
39                 //L 小于 100  的时候， L = 0 ，看起来就像磁性吸附的效果  这里也能做范围限制
40                  if ( L < 100 ) {
41                     L = 0;
42                 } else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {
43                     L = document.documentElement.clientWidth - obj.offsetWidth;
44                 }
45                 
46                 if ( T < 0 ) {
47                     T = 0;
48                 } else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
49                     T = document.documentElement.clientHeight - obj.offsetHeight;
50                 }
51                 
52                 obj.style.left = L + 'px';
53                 obj.style.top = T + 'px';
54                 
55             }
56             
57             document.onmouseup = function() {
58                 document.onmousemove = document.onmouseup = null;
59                 //取消非标准IE下的全局捕获， 
60                 if ( obj.releaseCapture ) {
61                     obj.releaseCapture();
62                 }
63             }
64             //标准浏览器使用这个就可以禁止浏览器默认的拖动选中文本 和图片的问题
65             return false;
66             
67         }
68         
69     }
70     
71 }
72 </script>
73 </head>
74 
75 <body>
76     <div id="div1"></div>
77     <img src="1.jpg" id="img1" />
78 </body>
79 </html>

增加碰撞检测：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 { 100px; height: 100px; background: red; position: absolute; z-index: 2;}
 8 #img1 { position: absolute; left: 500px; top: 200px;}
 9 </style>
10 <script>
11 window.onload = function() {
12     
13     var oDiv = document.getElementById('div1');
14     var oImg = document.getElementById('img1');
15     
16     drag(oDiv);
17     
18     function drag(obj) {
19         
20         obj.onmousedown = function(ev) {
21             var ev = ev || event;
22             
23             var disX = ev.clientX - this.offsetLeft;
24             var disY = ev.clientY - this.offsetTop;
25             
26             if ( obj.setCapture ) {
27                 obj.setCapture();
28             }
29             
30             document.onmousemove = function(ev) {
31                 var ev = ev || event;
32                 
33                 var L = ev.clientX - disX;
34                 var T = ev.clientY - disY;
35                 
36             //碰撞检测---------  原理就是获取拖拽的元素的 上下左右值 和 等待碰撞的元素的 上下左右值 进行比较。
37                 var L1 = L;
38                 var R1 = L + obj.offsetWidth;
39                 var T1 = T;
40                 var B1 = T + obj.offsetHeight;
41                 
42                 var L2 = oImg.offsetLeft;
43                 var R2 = L2 + oImg.offsetWidth;
44                 var T2 = oImg.offsetTop;
45                 var B2 = T2 + oImg.offsetHeight;
46                 
47                 if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
48                     oImg.src = '1.jpg';
49                 } else {
50                     oImg.src = '2.jpg';
51                 }
52             //碰撞检测---------
53                 
54                 obj.style.left = L + 'px';
55                 obj.style.top = T + 'px';
56                 
57             }
58             
59             document.onmouseup = function() {
60                 document.onmousemove = document.onmouseup = null;
61                 if ( obj.releaseCapture ) {
62                     obj.releaseCapture();
63                 }
64             }
65             
66             return false;
67             
68         }
69         
70     }
71     
72 }
73 </script>
74 </head>
75 
76 <body>
77     <div id="div1"></div>
78     <img src="1.jpg" id="img1" />
79 </body>
80 </html>

拖拽改变层大小：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 { 100px; height: 100px; background: red; position: absolute; left: 500px; top: 200px;}
 8 </style>
 9 <script>
10 window.onload = function() {
11     
12     var oDiv = document.getElementById('div1');
13     
14     oDiv.onmousedown = function(ev) {
15         
16         var ev = ev || event;
17         
18         var disW = this.offsetWidth;
19         var disX = ev.clientX;  
20         var disL = this.offsetLeft;
21         
22         var b = '';
23         
24         if ( disX > disL + disW - 10 ) {
25             //alert( 'right' );  鼠标在元素的右边
26             b = 'right';
27         }
28         if ( disX < disL + 10 ) {
29             //alert( 'left' );  鼠标在元素的左边
30             b = 'left';
31         }
32         
33         document.onmousemove = function(ev) {
34             
35             var ev = ev || event;
36             
37             switch( b ) {
38                 
39                 case 'left':
40                     oDiv.style.width = disW - ( ev.clientX - disX ) + 'px';  //修改width 值   .由于ev.clientX（鼠标move时候的值） - disX（鼠标按下时候的值）  结果为 正负两种  ， 而+ 负数   等于   - 一个数。
41                     oDiv.style.left = disL + ( ev.clientX - disX ) + 'px';   //修改Left 值
42                     break;
43                     
44                 case 'right':
45                     oDiv.style.width = disW + ( ev.clientX - disX ) + 'px';
46                     break;
47                 
48             }
49             
50         }
51         
52         document.onmouseup = function() {
53             document.onmousemove = document.onmouseup = null;
54         }
55         
56         return false;
57         
58     }
59     
60 }
61 </script>
62 </head>
63 
64 <body>
65     <div id="div1"></div>
66 </body>
67 </html>

模拟滚动条控制内容滚动：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7 #div1 { 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
  8 #div2 { 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
  9 #div3 { 498px; height: 498px; border: 1px solid green; position: absolute; left: 50px; top: 10px;}
 10 #div4 { position: absolute; left: 0; top: 0;}
 11 </style>
 12 <script>
 13 window.onload = function() {
 14     
 15     var oDiv1 = document.getElementById('div1');
 16     var oDiv2 = document.getElementById('div2');
 17     var oDiv3 = document.getElementById('div3');
 18     var oDiv4 = document.getElementById('div4');
 19     
 20     var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
 21     
 22     oDiv2.onmousedown = function(ev) {
 23         
 24         var ev = ev || event;
 25         
 26         var disY = ev.clientY - this.offsetTop;
 27         
 28         document.onmousemove = function(ev) {
 29             
 30             var ev = ev || event;
 31             
 32             var T = ev.clientY - disY;
 33             
 34             if ( T < 0 ) {
 35                 T = 0;
 36             } else if ( T > iMaxTop ) {
 37                 T = iMaxTop;
 38             }
 39             
 40             oDiv2.style.top = T + 'px';
 41             
 42             var iScale = T / iMaxTop;  //得到一个0 - 1之间的比例
 43             
 44             document.title = iScale;
 45             
 46             oDiv4.style.top = (oDiv3.clientHeight - oDiv4.offsetHeight) * iScale + 'px';  //设置目标元素的left值
 47             
 48         }
 49         
 50         document.onmouseup = function() {
 51             
 52             document.onmousemove = document.onmouseup = null;
 53             
 54         }
 55         
 56         return false;
 57         
 58     }
 59     
 60 }
 61 </script>
 62 </head>
 63 
 64 <body>
 65     <div id="div1">
 66         <div id="div2"></div>
 67     </div>
 68     <div id="div3">
 69         <div id="div4">
 70             搜索设置|百度首页|登录注册
 71 新闻　网页　贴吧　知道　音乐　图片　视频　地图　文库　更多»
 72 推荐 : 用手机随时随地上百度
 73 其他人还搜
 74 
 75 烤鱼
 76 
 77 脆豆腐
 78 
 79 川北凉粉
 80 
 81 鱼豆腐
 82 妙味课堂 - 首页 javascript培训|前端开发|javascript教程|...
 83 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时...
 84 www.miaov.com/ 2013-9-20 - 百度快照
 85 在北京市搜索妙味_百度地图
 86 
 87 A 妙味正宗川味小吃全景
 88 
 89 6条评论 团
 90 
 91 地址：北京海淀区成府路28号华联商厦...
 92 
 93 电话：(010)62660082
 94 
 95 B 妙味居全景
 96 
 97 地址：北京昌平区上庄路117号
 98 
 99 C 妙味莱早餐
100 
101 地址：永安路5-6 附近
102 
103 查看全部8条结果>>
104 
105 map.baidu.com
106 妙味教程网
107 妙味教程网为广大网站爱好者提供一站式教程下载服务。免费教程包括JAVA 、PHP、.net、CSS、jquery、flash、AS3、Ps、HTML等。另外还提供高清妙味视频、众多企业站...
108 www.178code.com/ 2013-10-27 
109 - 百度快照
110 妙味_百度百科
111 
112 读音妙味拼音：miàowèi注音：ㄇㄧㄠˋㄨㄟˋ词语解释美好的品质。《晋书·王接传》："窃见处士王接，岐嶷儁异，十三而孤，居丧尽礼，学过目而...
113 读音 - 词语解释
114 baike.baidu.com/ 2013-04-29
115 妙味,北京妙味的电话_地址_北京地图 - 城市吧街景地图
116 专业提供妙味地图北京的信息,妙味地址是:西安市兴善寺东街附近,妙味电话是:029-83050973,妙味简介:公交线路: …,妙味周边二手房、租房、购物广场、休闲娱乐、...
117 bj.city8.com/canyinfuwu/... 2013-07-19 
118 - 百度快照
119 妙味茶馆 - Powered by Discuz!
120 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时还提供了css教程、...
121 42.96.185.107/ 2013-12-16 
122 - 百度快照
123 妙味来电话,地址,价格,营业时间(图)-西安-大众点评网
124 妙味来DIY2选10人已购买 默认点评(0) 全部点评(1) 签到短评(0) 写点评 全部全部(1) 5星5星(0) 4星4星(0) 3星3星(1) 2星2星(0) 1星1星(0) ...
125 www.dianping.com/shop/8833... 2013-06-02 
126 - 百度快照
127 妙味_妙味电话_地址_价格_营业时间_北京海淀114生活网
128 妙味地址、营业时间、电话、人均价格、折扣价格,妙味介绍简介、公交乘车路线和停车位,以及最新优惠券和用户点评信息,尽在北京海淀114生活网
129 s.114chn.com/s-gg5icd1i 2013-12-19 
130 - 百度快照
131 【妙味来团购】(4.9折)-大众点评网团购西安站
132 西安妙味来团购,来自点评团西安站。妙味来团购优惠详情:仅售38元,价值78元DIY2选1!只要您的脚步一踏入您就会立刻感觉到放松,享受健康的生活方式!。
133 t.dianping.com/deal/320... 2013-08-29 
134 - 百度快照
135 妙味课堂JavaScript视频教程_免费高速下载|百度云 网盘-分享无限制
136 文件名:妙味课堂JavaScript视频教程 文件大小:- 分享者:iamxie1127 分享时间:2013-8-28 17:21 下载次数:573
137 pan.baidu.com/share/l...?shareid=279... 2013-08-28 
138 - 百度快照
139 
140 12345678910下一页>百度为您找到相关结果约2,450,000个
141 相关搜索    妙味课堂        妙味课堂javascript        妙味vip        妙味酸奶        妙味烤鱼
142 味妙烤鱼吧        妙味茶馆        妙味牛奶        妙味学堂        味妙烤鱼吧团购
143    结果中找   帮助   反馈意见   举报   高级搜索
144 ©2013 Baidu 此内容系百度根据您的指令自动搜索的结果，不代表百度赞成被搜索网站的内容或立场
145 搜索设置|百度首页|登录注册
146 新闻　网页　贴吧　知道　音乐　图片　视频　地图　文库　更多»
147 推荐 : 用手机随时随地上百度
148 其他人还搜
149 
150 烤鱼
151 
152 脆豆腐
153 
154 川北凉粉
155 
156 鱼豆腐
157 妙味课堂 - 首页 javascript培训|前端开发|javascript教程|...
158 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时...
159 www.miaov.com/ 2013-9-20 - 百度快照
160 在北京市搜索妙味_百度地图
161 
162 A 妙味正宗川味小吃全景
163 
164 6条评论 团
165 
166 地址：北京海淀区成府路28号华联商厦...
167 
168 电话：(010)62660082
169 
170 B 妙味居全景
171 
172 地址：北京昌平区上庄路117号
173 
174 C 妙味莱早餐
175 
176 地址：永安路5-6 附近
177 
178 查看全部8条结果>>
179 
180 map.baidu.com
181 妙味教程网
182 妙味教程网为广大网站爱好者提供一站式教程下载服务。免费教程包括JAVA 、PHP、.net、CSS、jquery、flash、AS3、Ps、HTML等。另外还提供高清妙味视频、众多企业站...
183 www.178code.com/ 2013-10-27 
184 - 百度快照
185 妙味_百度百科
186 
187 读音妙味拼音：miàowèi注音：ㄇㄧㄠˋㄨㄟˋ词语解释美好的品质。《晋书·王接传》："窃见处士王接，岐嶷儁异，十三而孤，居丧尽礼，学过目而...
188 读音 - 词语解释
189 baike.baidu.com/ 2013-04-29
190 妙味,北京妙味的电话_地址_北京地图 - 城市吧街景地图
191 专业提供妙味地图北京的信息,妙味地址是:西安市兴善寺东街附近,妙味电话是:029-83050973,妙味简介:公交线路: …,妙味周边二手房、租房、购物广场、休闲娱乐、...
192 bj.city8.com/canyinfuwu/... 2013-07-19 
193 - 百度快照
194 妙味茶馆 - Powered by Discuz!
195 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时还提供了css教程、...
196 42.96.185.107/ 2013-12-16 
197 - 百度快照
198 妙味来电话,地址,价格,营业时间(图)-西安-大众点评网
199 妙味来DIY2选10人已购买 默认点评(0) 全部点评(1) 签到短评(0) 写点评 全部全部(1) 5星5星(0) 4星4星(0) 3星3星(1) 2星2星(0) 1星1星(0) ...
200 www.dianping.com/shop/8833... 2013-06-02 
201 - 百度快照
202 妙味_妙味电话_地址_价格_营业时间_北京海淀114生活网
203 妙味地址、营业时间、电话、人均价格、折扣价格,妙味介绍简介、公交乘车路线和停车位,以及最新优惠券和用户点评信息,尽在北京海淀114生活网
204 s.114chn.com/s-gg5icd1i 2013-12-19 
205 - 百度快照
206 【妙味来团购】(4.9折)-大众点评网团购西安站
207 西安妙味来团购,来自点评团西安站。妙味来团购优惠详情:仅售38元,价值78元DIY2选1!只要您的脚步一踏入您就会立刻感觉到放松,享受健康的生活方式!。
208 t.dianping.com/deal/320... 2013-08-29 
209 - 百度快照
210 妙味课堂JavaScript视频教程_免费高速下载|百度云 网盘-分享无限制
211 文件名:妙味课堂JavaScript视频教程 文件大小:- 分享者:iamxie1127 分享时间:2013-8-28 17:21 下载次数:573
212 pan.baidu.com/share/l...?shareid=279... 2013-08-28 
213 - 百度快照
214 
215 12345678910下一页>百度为您找到相关结果约2,450,000个
216 相关搜索    妙味课堂        妙味课堂javascript        妙味vip        妙味酸奶        妙味烤鱼
217 味妙烤鱼吧        妙味茶馆        妙味牛奶        妙味学堂        味妙烤鱼吧团购
218    结果中找   帮助   反馈意见   举报   高级搜索
219 ©2013 Baidu 此内容系百度根据您的指令自动搜索的结果，不代表百度赞成被搜索网站的内容或立场
220         </div>
221     </div>
222 </body>
223 </html>

模拟滚动条控制其他元素的变化：还可以做一些滑动条等效果

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 { 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
 8 #div2 { 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
 9 #div3 { 500px; height: 0; background: green; position: absolute; left: 50px; top: 10px;}
10 </style>
11 <script>
12 window.onload = function() {
13     
14     var oDiv1 = document.getElementById('div1');
15     var oDiv2 = document.getElementById('div2');
16     var oDiv3 = document.getElementById('div3');
17     
18     var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
19     
20     oDiv2.onmousedown = function(ev) {
21         
22         var ev = ev || event;
23         
24         var disY = ev.clientY - this.offsetTop;
25         
26         document.onmousemove = function(ev) {
27             
28             var ev = ev || event;
29             
30             var T = ev.clientY - disY;
31             
32             if ( T < 0 ) {
33                 T = 0;
34             } else if ( T > iMaxTop ) {
35                 T = iMaxTop;
36             }
37             
38             oDiv2.style.top = T + 'px';
39             
40             var iScale = T / iMaxTop;
41             
42             document.title = iScale;
43             
44             oDiv3.style.height = 500 * iScale + 'px';
45             
46         }
47         
48         document.onmouseup = function() {
49             
50             document.onmousemove = document.onmouseup = null;
51             
52         }
53         
54         return false;
55         
56     }
57     
58 }
59 </script>
60 </head>
61 
62 <body>
63     <div id="div1">
64         <div id="div2"></div>
65     </div>
66     <div id="div3"></div>
67 </body>
68 </html>