弹出框移动，鼠标点击弹框，自由拖拽，移动

-------------------------
html
-------------------------
<div class="row" style="height: 100%;" id="top">
<div class="uarp-container" style="height: 100%;color: #FFFFFF;" id="panel-attable">
</div>
<div id="show">
<div id="showbox">
</div>
<div id="back" class="glyphicon glyphicon-remove" onclick="back()">
</div>
</div>
</div>
-------------------------
css
-------------------------
#show {
width: 400px;
display: none;
position: absolute;
top: 150px;
left: 66%;
background-color: #fff;
}
#showbox {
width: 400px;
min-height: 50px;
font: 100 14px/1 "微软雅黑";
border: 1px solid #3c8dbc;
top: 150px;
left: 66%;
background-color: #fff;
padding: 5px;

}
#back{
position: absolute;
top: 2px;
cursor: pointer;
left: 378px;
background-color: #fff;
padding: 3px;
}

-------------------------
js
-------------------------
var flag=false;
var mouseLeft;
var mouseTop;
$('#top').mousedown(function(event){
var downX=event.pageX; //获取鼠标坐标
var downY=event.pageY;
var offsetLeft=$('#show').position().left //获取弹出框的left值
var offsetTop =$('#show').position().top
mouseLeft=downX-offsetLeft; //计算鼠标在弹出框中的位置
mouseTop =downY-offsetTop;
flag=true;
})
$(document).mousemove(function(event){
if(flag==true){
var moveX=event.pageX; //获取鼠标坐标
var moveY=event.pageY;
var moveLeft=moveX-mouseLeft; //获取移动过程中弹出框的left值
var moveTop =moveY-mouseTop;
var maxX=$(document).width() -$('#show').outerWidth();
var maxY=$(document).height()-$('#show').outerHeight();
console.log($('#show').outerWidth())
//范围限定
moveLeft=Math.min(Math.max(0,moveLeft),maxX);
moveTop =Math.min(Math.max(0,moveTop),maxY);
$('#show').css({'left':moveLeft,'top':moveTop,'backgroud':'red'});
}
})
$(document).mouseup(function(event){
flag=false;
})