码迷,mamicode.com
首页 > 其他好文 > 详细

DIV拖拽

时间:2015-12-14 01:24:46      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

 1     window.onload = function() {
 2         var oDiv = document.getElementById("div1");
 3         var disX = 0;
 4         var disY = 0;
 5 
 6         oDiv.onmousedown = function(ev) {
 7             var oEvent = ev || event;
 8 
 9             //记录鼠标相对DIV的距离
10             disX = oEvent.clientX - oDiv.offsetLeft;
11             disY = oEvent.clientY - oDiv.offsetTop;
12 
13             document.onmousemove = function(ev) {
14                 var oEvent = ev || event;
15                 var l = oEvent.clientX - disX;
16                 var t = oEvent.clientY - disY;
17 
18                 //防止DIV移除到浏览器外面
19                 if (l < 0) {
20                     l = 0;
21                 } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
22                     l = document.documentElement.clientWidth - oDiv.offsetWidth;
23                 }
24 
25                 if (t < 0) {
26                     t = 0;
27                 } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
28                     t = document.documentElement.clientHeight - oDiv.offsetHeight;
29                 }
30 
31                 oDiv.style.left = l + "px";
32                 oDiv.style.top = t + "px";
33             }
34 
35             document.onmouseup = function() {
36                 document.onmousemove = null;
37             }
38 
39             //兼容FF
40             return false;
41         };
42     };

 

DIV拖拽

标签:

原文地址:http://www.cnblogs.com/huoteng/p/5043972.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!