jQuery 版元素拖拽原型代码 |
本文标签: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> 下载:完整示例 |