js_移动窗口

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
var logos=false;
var x,y;
$(document).ready(function(){
$(".b").mousedown(function(e){
x=e.pageX-$(".a").offset().left;
y=e.pageY-$(".a").offset().top;
$("span").text("X: " + x + ", Y: " + e.pageY);
logos=true;
});
$(document).mousemove(function(e){
if(logos){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
$(".a").css({"left":e.pageX-x,"top":e.pageY-y,});
}
});
$(".b").mouseup(function(e){
logos=false;
});
$(".d").click(function(){
$(".a").remove();
});
});
</script>
    <title>移动窗口</title>
    <style>
.a{
        font-family:微软雅黑;
        position:absolute;
        left:160px;
        top:150px;
        width:400px;
        height:320px;
        border:1px solid #0099CC;
        background:#fff;
}
.b{


position:absolute;
        width:100%;
        height:30px;
        border-bottom:1px solid #0099CC;
background:#DDEDFB;
}
.c{
position:absolute;
top:31px;
        width:100%;
        height:289px;
background:#fff;
}
.d{
position: absolute;
top:5px;
right:5px;
width: 20px;
height:20px;
background-image: url("img/close.png");
background-size:cover;
}
</style>
  </head>
  <body style="background:#fff;">
    <div class="a">
      <div class="b">窗口标题<a href="#" class="d"></a></div>
      <div class="c">窗口</div>
    </div>
<p>鼠标指针位于： <span></span></p>
  </body>
</html>