JavaScript如何实现拖放功能

1.在学习ExtJs时，对其拖放功能感到很陌生，然后找了个拖放功能实现。

2.拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化；元素的移动就是style.position的top和left的改变。

当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。

根据以上的基本原理，我写出了下面的基本思路。感觉代码还是比较短的，

 1 拖拽状态 = 0
 2 鼠标在元素上按下的时候{
 3      拖拽状态 = 1
 4      记录下鼠标的x和y坐标
 5      记录下元素的x和y坐标
 6 }
 7 鼠标在元素上移动的时候{
 8       如果拖拽状态是0就什么也不做。
 9       如果拖拽状态是1，那么
10       　　元素y = 现在鼠标y - 原来鼠标y + 原来元素y
11 　　　　元素x = 现在鼠标x - 原来鼠标x + 原来元素x
12 }
13 鼠标在任何时候放开的时候{
14 　　拖拽状态 = 0
15 }

 1 <html>
 2     <head>
 3         <meta http-equiv="Content-Type" content="text/html; charset=gbk">
 4         <title>mockDD</title>
 5 
 6        
 7        <script type="text/javascript">
 8         var dragging = false;
 9         var test;
10         var mouseY;
11         var mouseX;
12         window.onload = function(){
13             test = document.getElementById("test");
14             test.onmousedown = down;
15             test.onmousemove = move;
16             test.onmouseup = up;
17             test.style.position = "relative";
18             test.style.top = "0px";
19             test.style.left = "0px";
20         }
21         function down(event)
22         {
23             event = event || window.event; 
24             dragging = true; 
25             mouseX = parseInt(event.clientX);
26             mouseY = parseInt(event.clientY);
27             objY = parseInt(test.style.top);
28             objX = parseInt(test.style.left);
29         }
30         function move(event){
31             event = event || window.event; 
32             if(dragging == true){
33                 var x,y;
34                 y = event.clientY - mouseY + objY;
35                 x = event.clientX - mouseX + objX;
36                 test.style.top = y + "px";
37                 test.style.left = x + "px";
38             }
39         }
40         function up(){
41             dragging = false;
42         }
43         </script>
44             
45     </head>
46     <body>
47 
48      <div id="test" style="border:1px solid; 400px; background:#CCCCCC;">
49       <p>我是拖拽示例DIV。</p>
50       <p>可以试验一下效果。</p>
51     </div>  
52        
53     </body>
54 </html>