jQuery 版元素拖拽原型代碼

本文主要針對拖拽原型進行解析，給剛接觸 JQuery 的愛好者一個簡單的樣本。
在引入 Jquery.js 後：
複製代碼 代碼如下:
<script type="text/javascript">
$(function(){
//綁定拖動元素對象
bindDrag(document.getElementById('test'));
});
function bindDrag(el){
//初始化參數
var els = el.style,
//滑鼠的 X 和 Y 軸座標
x = y = 0;
//邪惡的食指
$(el).mousedown(function(e){
//按下元素後，計算當前滑鼠位置
x = e.clientX - el.offsetLeft;
y = e.clientY - el.offsetTop;
//IE下捕捉焦點
el.setCapture && el.setCapture();
//綁定事件
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
});
//移動事件
function mouseMove(e){
//宇宙超級無敵運算中...
els.top = e.clientY - y + 'px';
els.left = e.clientX - x + 'px';
}
//停止事件
function mouseUp(){
//IE下釋放焦點
el.releaseCapture && el.releaseCapture();
//卸載事件
$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp);
}
}
</script>

下載：完整樣本