<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖拽</title>
</head>
<style>
#div1{width: 200px;height: 200px;background-color: red;position: absolute; padding:30px;border: 2px solid #000000;}
.box{border: 1px dashed black;position: absolute;}
</style>
<body>
<div id="div1"></div>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var disX=0,disY=0;
oDiv.onmousedown = function(ev){
var oEvent = ev||event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
var oBox = document.createElement("div");
oBox.className = "box";
oBox.style.width = oDiv.offsetWidth-2 + "px";//减去边框
oBox.style.height = oDiv.offsetHeight-2 + "px";
//下面两行防止div移动后再次点击时会自动生成一个在原div位置的虚线框
oBox.style.left = oDiv.offsetLeft + "px";
oBox.style.top = oDiv.offsetTop + "px";
document.body.appendChild(oBox);
document.onmousemove = function(ev){
var oEvent = ev||event;
var l = oEvent.clientX-disX;
var t = oEvent.clientY-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(){
document.onmousemove = null;
document.onmouseup = null;
oDiv.style.left = oBox.offsetLeft+"px";
oDiv.style.top = oBox.offsetTop+"px";
document.body.removeChild(oBox);
}
return false;//firefox某些版本下会出现鬼影现象，阻止默认事件（浏览器bug）
}
}
</script>
</body>
</html>
