<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#typewords
{
}
#write
{
}
#container
{
 border:2px solid red;
 width:800px;
 height:500px;
}
#draggable
{
 position:absolute;
 z-index:5;
 width:200px;
 height:200px;
 top:20px;
 left:50px;
 border: 3px solid blue; 
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
//拖動
function Drag()
{
  $("#draggable").mousemove(function(event){
  //得到X坐標(biāo)和Y坐標(biāo)
  var x=event.clientX;
  var y=event.clientY;
  //得到可拖動框的高度和寬度
  var widthX=$("#draggable").width();
  var heightY=$("#draggable").height();
  //alert("x:"+ x+"width:"+widthX);
  //確定拖動的時候X,Y的值
  $("#draggable").css("top",y-50+"px");
  $("#draggable").css("left",x-50+"px");
 }); 
}
function MouseUp()
{
   $("#draggable").mouseup(function(){
   if(window.captureEvents)
   {
    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    var d = document;    
    d.onmousemove = null;
    d.onmouseup = null;
   }
   //解除mousemove的綁定
   $("#draggable").unbind("mousemove");
  }); 
}
//鼠標(biāo)拖動DIV,鼠標(biāo)按下去的事件
//alert('1');
$(document).ready(function(e) {
 //鼠標(biāo)按下去的時候執(zhí)行下面的代碼
 $("#draggable").mousedown(function(){
  Drag();  
  //鼠標(biāo)點擊的時候取消事件綁定
  MouseUp();
  });
});
</script>
</head>
<body>
<!--輸入文字 -->
<div><input id="typewords" type="text" />&nbsp;&nbsp;<input type="button" id="write" value="寫心情" /></div>
<br />
<hr />
<!-- container,里面包含了心情的內(nèi)容-->
<div id="container">
 <!--可拖動的DIV -->
 <div id="draggable">
 測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)
 </div>
</div>
</body>
</html>

運行效果如下：