Js拖拽一个简单方法

http://jsfiddle.net/dtdxrk/tuc8w/7/embedded/result/

思路很简单鼠标点击触发事件元素跟随鼠标移动鼠标放开清除事件

主要是计算元素的位置

鼠标在元素上按下的时候
记录下鼠标的x和y坐标
记录下元素的x和y坐标

鼠标在元素上移动的时候
元素y = 现在鼠标y - 原来点击鼠标y + 原来元素y
元素x = 现在鼠标x - 原来点击鼠标x + 原来元素x

 1 <!DOCTYPE HTML>
 2   <html lang="en">
 3   <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5   <title>Js拖拽方法</title>
 6   <style type="text/css">
 7   body{margin:0}
 8   .box{
 9       width:350px; 
10       border:1px solid #cfcfcf;
11       box-shadow:2px 3px 0 rgba(190,190,190,0.3);
12       text-align:center;
13       padding-bottom:20px;
14       background-color: #fff;
15       z-index: 100;
16       position: absolute;
17       padding: 0;
18   }
19   .box h1{
20       height:30px;
21       line-height:30px;
22       font-size:14px;
23       text-align: left;
24       margin:0 0 20px 0;
25       background-color:green;
26       color:#fff;
27       border-bottom: 1px solid #cfcfcf;
28       padding-left:15px;
29       cursor:move;
30   }
31   </style>
32   
33   <body>
34   
35   <div class="box" id="popBox" style="top:0px;left:0px;">
36       <h1>Js拖拽一个方法</h1>
37       <p>
38   
39       </p>
40   </div>
41   
42   <div class="box" id="popBox2" style="top:80px;left:0px;">
43       <h1>Js可拖拽的弹出框</h1>
44       <p>
45   <img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" width="270" height="129">
46       </p>
47   </div>
48   
49   <script type="text/javascript">
50   function Drag(id, zindex){
51       var box = document.getElementById(id),
52           h1 = box.getElementsByTagName("h1")[0];
53       var scrollHeight = window.screen.availHeight,
54           scrollWidth = window.screen.availWidth;
55       box.style.zIndex = zindex;
56   
57       h1.onmousedown = function(event){    //鼠标按钮被按下
58           box.style.opacity = 0.5;
59           box.style.filter = "alpha(opacity=50)";
60           var event = window.event || event;
61           var mouseX = event.clientX,
62               mouseY = event.clientY,
63               objY = parseInt(box.style.top),
64               objX = parseInt(box.style.left);
65   
66           document.onmousemove = function(event){
67               var event = window.event || event;
68               box.style.top = event.clientY - mouseY + objY + "px",
69               box.style.left =event.clientX - mouseX + objX + "px";
70           }
71   
72           document.onmouseup = function(){    //鼠标按键松开
73               box.style.opacity = 1;
74               box.style.filter = "alpha(opacity=100)";
75               document.onmousemove = null;
76           }
77       }
78   }
79   
80 
81 
82  var box1 = new Drag("popBox",2);
83  var box2 = new Drag("popBox2",3);
84  
85   </script>
86   
87   </body>
88   </html>