站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: jQuery 版元素拖拽原型代码
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

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>

下载:完整示例
Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -