<!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>