1.body里面有Div和一段文字
<body>
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
<div id=“div1”>盒子里面的文字盒子里面的文字盒子里面的文字盒子里面的文字盒子里面的文字</div>
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</body>
2.给Div设置一些css样式
<style type="text/css">
div{
top:0;left: 0;
width: 100px;height: 100px;
position: absolute;
background: red;
padding: 1px;
line-height: 20px;
word-break: break-all;
word-wrap:break-word;
cursor: pointer;
border-radius: 10px;
box-shadow: 1px 1px 1px #ccc;
}
</style>
3.给Div添加js效果（重要）
<script>
window.onload =function(){
var oDiv =document.getElementById('div1');
oDiv.onmousedown =function(ev){
var oEvent =ev||event;
var disX =oEvent.clientX -oDiv.offsetLeft;
var disY =oEvent.clientY -oDiv.offsetTop;
if(oDiv.setCapture){
oDiv.onmousemove =mouseMove;
oDiv.onmouseup =mouseUp;
oDiv.setCapture();
}else{
document.onmousemove =mouseMove;
document.onmouseup =mouseUp;
}
function mouseMove(ev){
var oEvent =ev||event;
var l =oEvent.clientX -disX;
var t =oEvent.clientY -disY;
var rightLine = document.documentElement.clientWidth-oDiv.offsetWidth;
var bottomLine = document.documentElement.clientHeight-oDiv.offsetHeight;
if(l <50){
l =0;
}else if(l >rightLine-50){
l = rightLine;
}
if(t <50){
t =0;
}else if(t >bottomLine-50){
t =bottomLine;
}
oDiv.style.cursor ="move";
oDiv.style.left =l+'px';
oDiv.style.top =t+'px';
};
function mouseUp(){
this.onmousemove =null;
this.onmouseup =null;
oDiv.style.cursor ="pointer";
if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
};
return false;
};
}
</script>