當然，代碼使用起來也非常的方便，很多東西就不用自己再去琢磨了。
研究的過程中順便用jQuery實現了一個div的拖動，代碼附於本文結尾。
實現的思路請參考我的可以拖動的DIV（二）一文。
在參考jQuery中文網站中的例子時，我發現他們在div窗口標題欄觸發click事件時，將div的位置移上了一些，而mouseup的事件注冊在整個div窗口上，這個思路讓我很受啟發，解決了鼠標移動很快而div不能跟上導致的錯誤，非常好的解決辦法。
另外，請注意事件起泡，在jQuery以及任何實現div拖動的js代碼中，事件起泡無疑都是要阻止的。
在jQuery 的bind或者unbind方法中，函數的返回值最好都用false，不信的話，可以試試true。
這個事件起泡的過程在一般代碼中我們用stopPropagation方法來阻止。
注意文中加載了jquery-1.2.6.js
代碼如下:
<script language="javascript" type="text/javascript" src="jquery-1.2.6.js"></script>
<style type="text/css">
<!–
body {
background-color: #333333;
}
.win{
position:absolute;
top:0px;
left:0px;
width:300px;
height:222px;
}
.title{
height:20px;
width:300px;
position:absolute;
background-color:#666666;
float:inherit;
top:0px;
left:0px;
background-image:url(bgo.gif);
}
.winCon{
height:200px;
width:298px;
position:absolute;
border:solid;
border-width:1px;
border-color:#666666;
border-top:none;
float:inherit;
left:0px;
top:20px;
}
–>
</style>
<a href="#" onclick="addDiv(this,'asd');">asgfsdg</a>
<a href="#" id="zxca" onclick="addDiv(this,'zxc');">asgfsdg</a>
<script language="javascript" type="text/javascript">
function addDiv(element,str){
$(document.body).append("<div class='win' id='win"+str+"‘><div class='title' id='"+str+"‘></div><div class='winCon'>asfsdgfsdgsd</div></div>");
$("#"+str).mousedown(function(event){
var offset = $(this).offset();
_x=event.clientX-offset.left;
_y=event.clientY+20-offset.top;
$("#win"+str).css({"top":offset.top-20+"px"});
$("#win"+str).mousemove(function(event){
_xx=event.clientX-_x;
_yy=event.clientY-_y;
this.style.left=_xx+"px";
this.style.top=_yy+"px";
this.style.zIndex="100″;
return false;
});
return false;
});
$("#win"+str).mouseup(function(){
$(this).unbind("mousemove");
$(this).css({"z-index":"-1″});
return false;
});
element.removeEventListener("click",true);
}
</script>