html{
width:100%;
height:100%;
}
body{
width:70%;
height:100%;
margin:0 auto;
border:2px solid #000;
}
.dialogue{
position:fixed;
width:80px;
height:80px;
background-color:aqua;
top:50%;
left:48%;
border-radius:10px;
text-align:left;
}
.head{
display:inline-block;
border:5px solid antiquewhite;
height:20px;
width:67%;
font-size:15px;
line-height:20px;
margin:0 0;
background-color:azure;
border-radius:5px 0 0 0;
-moz-user-select:none;
-webkit-user-select:none;
}
input{
display:inline-block;
width:20%;float:right;
text-align:left;
height:30px;
border:0px;
line-height:30px;
background-color:antiquewhite;
border-radius:0 5px 0 0;
}
无标题文档
xinxi:
var posx_begin,posy_begin;
var start=false;
document.getElementById(“head”).addEventListener(“mousedown”,function(event){
posx_begin=event.offsetX;
posy_begin=event.offsetY;
start=true;
});
document.getElementById(“head”).addEventListener(“mousemove”,function(event){
if(start){
document.getElementById(“dia”).style.top=event.offsetY-posy_begin+parseInt(window.getComputedStyle(document.getElementById(“dia”))[‘top’].slice(0,-2))+”px”;
document.getElementById(“dia”).style.left=event.offsetX-posx_begin+parseInt(window.getComputedStyle(document.getElementById(“dia”))[‘left’].slice(0,-2))+”px”;
}
});
document.getElementById(“head”).onmouseup=document.getElementById(“head”).onmouseout=function(event){
if(start){
start=false;
}
}