1.在学习ExtJs时，对其拖放功能感到很陌生，然后找了个拖放功能实现。
2.拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化；元素的移动就是style.position的top和left的改变。
当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
根据以上的基本原理，我写出了下面的基本思路。感觉代码还是比较短的，
拖拽状态 = 0
鼠标在元素上按下的时候{
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
拖拽状态 = 0
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>mockDD</title> <script type="text/javascript">
var dragging = false;
var test;
var mouseY;
var mouseX;
window.onload = function(){
test = document.getElementById("test");
test.onmousedown = down;
test.onmousemove = move;
test.onmouseup = up;
test.style.position = "relative";
test.style.top = "0px";
test.style.left = "0px";
}
function down(event)
{
event = event || window.event;
dragging = true;
mouseX = parseInt(event.clientX);
mouseY = parseInt(event.clientY);
objY = parseInt(test.style.top);
objX = parseInt(test.style.left);
}
function move(event){
event = event || window.event;
if(dragging == true){
var x,y;
y = event.clientY - mouseY + objY;
x = event.clientX - mouseX + objX;
test.style.top = y + "px";
test.style.left = x + "px";
}
}
function up(){
dragging = false;
}
</script> </head>
<body> <div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">
<p>我是拖拽示例DIV。</p>
<p>可以试验一下效果。</p>
</div> </body>
</html>