版权声明：Amazing刘许许的博客 https://blog.csdn.net/asedasdad/article/details/82051141
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
p{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:100px
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
<script type="text/javascript">
var box = document.getElementsByTagName("div")[0];
var box1 = document.getElementsByTagName("p")[0];
function drag(obj){
obj.onmousedown=function(e){
var evt = e||window.event;
var xx = evt.clientX-obj.offsetLeft;
var yy = evt.clientY-obj.offsetTop;
document.onmousemove=function(e){
var evt =e||window.event;
var x = evt.clientX-xx;
var y = evt.clientY-yy;
if(x<0){
x =0;
}
if(x>document.documentElement.clientWidth-obj.offsetWidth){
x= document.documentElement.clientWidth-obj.offsetWidth;
}
if(y<0){
y =0;
}
if(y>document.documentElement.clientHeight-obj.offsetHeight){
y = document.documentElement.clientHeight-obj.offsetHeight;
}
obj.style.left=x+"px";
obj.style.top=y+"px";
return false;
}
document.onmouseup=function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
drag(box);
drag(box1);
</script>
</html>