<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>拖拽</title>
<style type="text/css">
body
{
margin:0px;
}
#b
{
width:100px;
height:50px;
border:1px solid #666666;
background-color:#FFCCCC;
}
#f
{
position:absolute;/*重要*/
width:100px;
height:50px;
border:1px solid #666666;
background-color:#CCCCCC;
}
</style>
</head>
<body>
<div id="b"></div>
<div id="f"></div>
<script type="text/javascript" language="javascript">
<!--
//获得物件对象
var b = document.getElementById("b");
var f = document.getElementById("f");
//配置物件位置
var b_orgnX = 0;
var b_orgnY = 0;
var f_orgnX = 300;
var f_orgnY = 100;
//设置物件位置
b.style.pixelLeft = b_orgnX;
b.style.pixelTop = b_orgnY;
f.style.pixelLeft = f_orgnX;
f.style.pixelTop = f_orgnY;
//拖拽过程中相关变量
var draging = false; //是否处于拖拽中
var offsetX = 0; //X方向上偏移量
var offsetY = 0; //Y方向上偏移量
//准备拖拽
function BeforeDrag()
{
draging = true;
offsetX = document.body.scrollLeft + event.clientX-f.style.pixelLeft;
offsetY = document.body.scrollTop + event.clientY-f.style.pixelTop;
}
//拖拽中
function OnDrag()
{
if(!draging)
{
return;
}
//更新位置
f.style.pixelLeft = document.body.scrollLeft + event.clientX-offsetX;
f.style.pixelTop = document.body.scrollTop + event.clientY-offsetY;
}
//结束拖拽
function EndDrag()
{
draging = false;
if (f.style.pixelLeft>=b.style.pixelLeft && f.style.pixelLeft<=(b.style.pixelLeft+b.offsetWidth) &&
f.style.pixelTop>=b.style.pixelTop && f.style.pixelTop<=(b.style.pixelTop+b.offsetHeight))
{
//拖拽块位于基块中，自动定位到基块位置
f.style.pixelLeft = b.style.pixelLeft;
f.style.pixelTop = b.style.pixelTop;
}
else
{
//拖拽块位于基块外，将拖拽块位置复原
f.style.pixelLeft = f_orgnX;
f.style.pixelTop = f_orgnY;
}
}
f.onmousedown = BeforeDrag;
f.onmousemove = OnDrag;
f.onmouseup = EndDrag;
f.onmouseout = EndDrag;
//-->
</script>
</body>
</html>
