<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 100%;
height: 100%;
position: relative;
}
#test{
width: 100px;
height: 100px;
background: #000;
position: absolute;
/*transform: translate(-50%,-50%);*/
}
#p{
width: 100%;
height: 20px;
background: red;
}
.close{
display: inline-block;
width: 20px;
height: 100%;
background:#ddd;
cursor: pointer;
}
</style>
</head>
<body>
<div id="test">
<p id="p">
<span class="close">X</span>
</p>
</div>
</body>
<script>
var oDrag = document.getElementById("test");
var oTitle = document.getElementById("p");
var closeEle = document.getElementsByClassName("close")[0];
oDrag.style.left=(document.body.offsetWidth-oDrag.offsetWidth)/2+"px";
oDrag.style.top=(document.body.offsetHeight-oDrag.offsetHeight)/2+"px";
window.onresize=function () {
oDrag.style.left=(document.body.offsetWidth-oDrag.offsetWidth)/2+"px";
oDrag.style.top=(document.body.offsetHeight-oDrag.offsetHeight)/2+"px";
drag(oTitle, oDrag,closeEle);
};
window.onload=function () {
drag(oTitle, oDrag,closeEle);
};
function drag(oTitle,oDrag,closeEle) {
closeEle.onclick=function () {
oDrag.style.display='none';
this.onclick=null;
};
oTitle.onmousedown=function(event){
oTitle.style.cursor = "move";
var event = event || window.event;
var disX=event.clientX-oDrag.offsetLeft;//鼠标在屏幕中的坐标减去元素距离屏幕的左边距，等于这个鼠标在div元素中距离div最左边的的左偏移量
var disY=event.clientY-oDrag.offsetTop;
console.log(disX,disY)
//鼠标移动，窗口随之移动 onmousemove在有物体移动是才执行alert事件；
document.onmousemove=function(event){
var event = event || window.event;
maxW=document.documentElement.clientWidth-oDrag.offsetWidth;//div元素在屏幕中的最大left。
maxH=document.documentElement.clientHeight-oDrag.offsetHeight;
posX=event.clientX-disX;//鼠标坐标减去鼠标在div元素中的偏移坐标，相当于div元素距离屏幕的最左的距离。也就是left
posY=event.clientY-disY;//鼠标坐标减去鼠标在div元素中的偏移坐标，相当于div元素距离屏幕的最顶部的距离。也就是top
if(posX<0){
posX=0;
}else if(posX>maxW){
posX=maxW;
}
if(posY<0){
posY=0;
}else if(posY>maxH){
posY=maxH;
}
oDrag.style.left=posX+'px';
oDrag.style.top=posY+'px';
};
//鼠标松开，窗口将不再移动
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
</script>
</html>
