本文主要针对拖拽原型进行解析,给刚接触 JQuery 的爱好者一个简单的示例。在引入 Jquery.js 后: 复制代码 代码如下: <BR>$(function(){ <BR>//绑定拖动元素对象 <BR>bindDrag(document.getElementById('test')); <BR>}); <BR>function bindDrag(el){ <BR>//初始化参数 <BR>var els = el.style, <BR>//鼠标的 X 和 Y 轴坐标 <BR>x = y = 0; <BR>//邪恶的食指 <BR>$(el).mousedown(function(e){ <BR>//按下元素后,计算当前鼠标位置 <BR>x = e.clientX - el.offsetLeft; <BR>y = e.clientY - el.offsetTop; <BR>//IE下捕捉焦点 <BR>el.setCapture && el.setCapture(); <BR>//绑定事件 <BR>$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp); <BR>}); <BR>//移动事件 <BR>function mouseMove(e){ <BR>//宇宙超级无敌运算中... <BR>els.top = e.clientY - y + 'px'; <BR>els.left = e.clientX - x + 'px'; <BR>} <BR>//停止事件 <BR>function mouseUp(){ <BR>//IE下释放焦点 <BR>el.releaseCapture && el.releaseCapture(); <BR>//卸载事件 <BR>$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp); <BR>} <BR>} <BR> 下载:完整示例