在拖拽中，使用邊框拖拽，即在拖拽開始時，物體的邊框先走，等移動停止後，物體在過去：
<style>
#div1{
width: 200px;
height: 200px;
background-color: darkorange;
position: absolute;
}
.box{
position: absolute;
border:1px dashed black;
}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
//封裝一個函數用於獲取鼠標座標
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
var pos=getPos(oEvent); //這樣就可以獲取鼠標座標，比如pos.x表示鼠標橫座標
var oBox=document.createElement('div'); //按下的時候創建一個邊框
document.body.appendChild(oBox); //將創建的邊框放入body中；
oBox.className='box'; //設置這個oBox的class
oBox.style.width=oDiv.offsetWidth-2+'px';
oBox.style.height=oDiv.offsetHeight-2+'px';
oBox.style.left=oDiv.offsetLeft+'px';
oBox.style.top=oDiv.offsetTop+'px';
disX=pos.x-oDiv.offsetLeft;
disY=pos.y-oDiv.offsetTop;
document.onmousemove=function(ev)
/*由於要防止鼠標滑動太快跑出div，這裏應該用document.
因爲觸發onmousemove時要重新獲取鼠標的座標，不能使用父函數上的pos.x和pos.y，所以必須寫var oEvent=ev||event;var pos=getPos(oEvent);*/
{
var oEvent=ev||event;
var pos=getPos(oEvent);
//防止div跑出可視框
var l=pos.x-disX;
var t=pos.y-disY;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oBox.style.left=l+'px';
oBox.style.top=t+'px';
}
document.onmouseup=function(ev)
{
oDiv.style.left=oBox.offsetLeft+'px';
oDiv.style.top=oBox.offsetTop+'px';
document.body.removeChild(oBox); //刪除當前box
document.onmousemove=null; //將move清除
document.onmouseup=null;
}
return false; //火狐的bug，要阻止默認事件
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>