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>

下载：完整示例