jQuery 版元素拖拽原型代码

146 阅读 0 评论 97 点赞

我是靠谱客的博主朴实指甲油，最近开发中收集的这篇文章主要介绍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> 