jQuery 版元素拖拽原型代码-jquery

时间:2016-04-14
本文主要针对拖拽原型进行解析,给刚接触 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>

下载:完整示例
上一条:说明你的Javascript技术很烂的五个原因-javascript技巧 下一条:JaveScript中的几个关键概念的理解-原型链的构建-javascript技巧

相关文章

最新文章