帶框的拖拽，拖動紅色div時，div先不移動，而是出現一個虛線框，虛線框移動到哪兒，放開鼠標後div就移動到哪兒。效果如下：
總體思路：當鼠標按下時，創建一個虛線框box。鼠標移動時，將座標賦值給虛線框。鼠標方放開時，將虛線框的座標賦值給div，隨即刪除掉虛線框。示例代碼如下。
<!DOCTYPE html>
<html>
<head>
<title>拖拽</title>
<style type="text/css">
#div1{ height: 200px; width: 200px; background-color: red; position: absolute; }
.box{ border:1px dashed black; position: absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
document.oncontextmenu = function(){
return false;
}
var oDiv1 = document.getElementById('div1');
var disX = 0;
var disY = 0;
oDiv1.onmousedown = function(ev){
disX = ev.clientX - oDiv1.offsetLeft;
disY = ev.clientY - oDiv1.offsetTop;
var oBox = document.createElement('div');
oBox.className = 'box';
oBox.style.width = oDiv1.offsetWidth+'px';
oBox.style.height = oDiv1.offsetHeight+'px';
oBox.style.left = oDiv1.offsetLeft+'px';
oBox.style.top = oDiv1.offsetTop+'px';
document.body.appendChild(oBox);
//當鼠標按下時，創建一個虛線框box,創建的虛線框的位置和div的位置一致。
document.onmousemove = function(ev){
var l = ev.clientX - disX;
var t = ev.clientY - disY;
if (l<30) {
l = 0;
} else if(l>document.documentElement.clientWidth-oDiv1.offsetWidth){
l = document.documentElement.clientWidth-oDiv1.offsetWidth;
}
if (t<30) {
t = 0;
} else if(t>document.documentElement.clientHeight-oDiv1.offsetHeight){
t = document.documentElement.clientHeight-oDiv1.offsetHeight;
}
oBox.style.left = l + 'px';
oBox.style.top = t + 'px';
//鼠標移動時，將座標賦值給虛線框。
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
oDiv1.style.left = oBox.offsetLeft+'px';
oDiv1.style.top = oBox.offsetTop+'px';
document.body.removeChild(oBox);
//鼠標方放開時，將虛線框的座標賦值給div，隨即刪除掉虛線框。
};
return false;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>