(043)javascript_event_drag_div 

 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=utf-8" />
 5     <title>EVENT</title>
 6     <style type="text/css">
 7         #myDiv {
 8             width: 100px;
 9             height: 100px;
10             background-color: blue;
11             position: absolute;
12         }
13     </style>
14     <script type="text/javascript">
15 
16         window.onload = function() {
17 
18             var myDivNode = document.getElementById("myDiv");
19             //鼠标距离div左上角顶点的距离(x,y)
20             var distanceX = 0;
21             var distanceY = 0;
22 
23             myDivNode.onmousedown = function(ev) {
24                 var oEvent = ev || event;
25                 distanceX = oEvent.clientX - myDivNode.offsetLeft;
26                 distanceY = oEvent.clientY - myDivNode.offsetTop;
27 
28                 document.onmousemove = function(ev) {
29                     var oEvent = ev || event;
30                     var l = oEvent.clientX - distanceX;
31                     var t = oEvent.clientY - distanceY;
32                     if(l < 0) 
33                     {
34                         l = 0;
35                     }
36                     else if(l > document.documentElement.clientWidth - myDivNode.offsetWidth)
37                     {
38                         l = document.documentElement.clientWidth - myDivNode.offsetWidth;
39                     }
40 
41                     if(t < 0) 
42                     {
43                         t = 0;
44                     }
45                     else if(t > document.documentElement.clientHeight - myDivNode.offsetHeight)
46                     {
47                         t = document.documentElement.clientHeight - myDivNode.offsetHeight;
48                     }
49 
50                     myDivNode.style.left = l + "px";
51                     myDivNode.style.top = t + "px";
52                 };
53 
54                 document.onmouseup = function()
55                 {
56                     document.onmousemove = null;
57                     document.onmouseup = null;
58                 }
59 
60                 //解决Firefox低版本的bug
61                 return false;
62             };
63 
64             
65         }
66         
67         
68     </script>
69 </head>
70 
71 <body>
72 
73     <div id="myDiv">
74         <span>123</span>
75     </div>
76 
77 </body>
78 </html>

 

posted @ 2014-03-23 11:02  雪中飞雁  阅读(84)  评论(0)    收藏  举报