实现拖拽的基本思路

基本思路

拖拽状态 = 0
鼠标在元素上按下的时候{
	拖拽状态 = 1
	记录下鼠标的x和y坐标
	记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
	如果拖拽状态是0就什么也不做。
	如果拖拽状态是1，那么
	元素y = 现在鼠标y - 原来鼠标y + 原来元素y
	元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
	拖拽状态 = 0
}

JavaScript代码

<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;
	document.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>

HTML代码

<div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">
  <p>我是拖拽示例DIV。</p>
  <p>可以试验一下效果。</p>
</div>