本文主要针对拖拽原型进行解析，给刚接触 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>

下载：完整示例