<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
margin: 0 auto;
width: 300px;
height:200px;
background-color: #ccc;
position: absolute;
}
.box1{
width:300px;
height: 20px;
background-color: yellow;
cursor: pointer;
}
#s{
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="box1" class="box1">
<span id="s">X</span>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var box=document.getElementById("box");
var box1=document.getElementById("box1");
var s=document.getElementById("s");
box1.onmousedown=function(e){
var e=e||event;
var x=e.clientX-box.offsetLeft;
var y=e.clientY-box.offsetTop;
document.onmousemove=function(e){
var e=e||event;
box.style.left=e.clientX-x+"px";
box.style.top=e.clientY-y+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
s.onclick=function(){
box.remove();
}
</script>