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>