简单的js实现拖拽出现的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery.js" language="javascript"></script>
<title>JS模拟拖拽</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
#box{
    width:150px;
    height:100px;
    border:3px solid #06C;
    overflow:auto;
    margin:70px auto;
    position:absolute;
}
#topBar{
    width:150px;
    height:70px;
    background:#FF9;
}
</style>
<script type="text/javascript"> 

 
 var this_x=0,this_y=0;   //记录鼠标开始时相对于拖放对象的位置
var drag_x=0,drag_y=0;   //记录拖拽对象的位置
var mouse_x=0,mouse_y=0; //记录鼠标的位置
var flag=false;          //判断是否拖动
 
$(document).ready(function() {
    
//鼠标按下，开始拖拽
$("#box #topBar").mousedown(function(event){
    ready_drag(event);
});
//停止拖拽
$(document).mouseup(function(){
    //alert("ss");
    flag=false;
    $("#value").html("当前状态：拖放结束"); 
    $("#topBar").css("cursor","default");
})
});
function ready_drag(event)
{
    $("#value").html("当前状态：开始拖放");
    $("#topBar").css("cursor","move");
    flag=true;    
    mouse_x=event.clientX;   
    mouse_y=event.clientY;
        
    var drag=$("#box");
    //获取拖拽对象相对于页面的位置
    drag_x=drag.attr("offsetLeft");   
    drag_y=drag.attr("offsetTop");
          
    //得到鼠标相对于拖拽对象的位置
    this_x=mouse_x-drag_x;
    this_y=mouse_y-drag_y;
         
    //鼠标移动开始执行拖拽程序
    $(document).mousemove(function(event){
    if(flag==true)
        { drag_start(this_x,this_y,event); } })         
} 
function drag_start(this_x,this_y,event)
{
    var mouse_x=event.clientX;   
    var mouse_y=event.clientY;
    drag_x = mouse_x-this_x;
    drag_y = mouse_y-this_y;
    $("#value").html("鼠标的位置：X:"+mouse_x+"Y:"+mouse_y+"");
    $("#box").css("left",drag_x);
    $("#box").css("top",drag_y-50);
}


</script>
</head>

<body>
  <div id="box">
      <div id="topBar">
      </div>
  </div>
  <div id="value"></div>
</body>
</html>