当前位置:主页 > 网页前端 > jquery >

jQuery 版元素拖拽原型代码

时间:2022-12-19 13:56:57 | 栏目: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>

下载:完整示例

您可能感兴趣的文章:

相关文章