本文主要针对拖拽原型进行解析,给刚接触 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> 下载:完整示例