JQuery实现DIV拖动效果
来源:互联网 发布:mac办公软件在哪里 编辑:程序博客网 时间:2024/05/16 08:05
1.指定div的Id<div id="drag">
<h2>来拖动我啊</h2>
</div>
2.注册监听mousedown事件
var dragging = false;
var iX, iY;
//鼠标按下
$("#drag").mousedown(function(e) {
dragging = true;//鼠标按下可移动
iX = e.clientX - this.offsetLeft;//横坐标
iY = e.clientY - this.offsetTop;//竖坐标
this.setCapture && this.setCapture();//设置鼠标捕获
return false;
});
3.注册监听onmousemove事件
//鼠标移动
document.onmousemove = function(e) {
if (dragging) {//鼠标移动
var e = e || window.event;
var oX = e.clientX - iX;
var oY = e.clientY - iY;
$("#drag").css({"left":oX + "px", "top":oY + "px"});//使用样式定位
return false;
}
};
4.注册监听mouseup//鼠标释放
$(document).mouseup(function(e) {
dragging = false;
$("#drag")[0].releaseCapture();
e.cancelBubble = true;
});
- JQuery实现DIV拖动效果
- jquery 实现 div 拖动效果
- JQuery实现DIV拖动效果示例
- jQuery实现Div控件拖动效果
- jquery div拖动效果
- DIV拖动效果实现
- div实现拖动效果
- jquery随意拖动div效果
- jQuery实现DIV层淡入淡出的拖动效果
- JavaScript实现DIV拖动效果
- DIV拖动效果的实现。
- JS+DIV 实现拖动效果
- jquery实现div的拖动
- jQuery 实现Div 可拖动
- jquery div拖动效果示例代码
- JQuery实现拖动删除效果
- 转载一个js实现div拖动效果
- js 实现 鼠标拖动DIV 效果
- springmvc梳理9----数据绑定
- php定时执行任务(windows7)
- Hadoop入门概述-概念及WordCount实例详解
- struts2 struts.xml result type 属性的说明
- Block————我的最爱
- JQuery实现DIV拖动效果
- perf
- 区域类CRgn
- [iOS diary]CABasicAnimation KeyPath大全与使用事例
- 各浏览器User-Agent的详细信息
- 安装Vmware tools
- sq_lite学习
- Linux下SSH免密码登录
- 嵌入式C编程32条准则