javascript实现拖拽的原理
来源:互联网 发布:vb soapclient30 编辑:程序博客网 时间:2024/05/16 01:41
1.拖拽的基本原理:当mousedown时,记下鼠标单击位置离拖拽容器左边沿的距离和上边沿的距离,即tmpX/tmpY;当mousemove时,通过定位拖拽容器的style.left/style.top,使拖拽容器进行移动,定位到哪里则由刚刚的tmpX/tmpY和当前鼠标所在的位置计算得出;当mouseup时,结束移动。
2.“var dragObj=this;”这句是为了在mousedown/mouseup/mousemove事件里对Drag对象的相关变量进行引用。因为在mousedown里的this是titleBar,而mouseup/mousemove里的this是document。
3.当拖拽速度太快导致鼠标移出拖拽容器,而拖拽容器位置未变时,用document.mousemove代替titleBar.mousemove即可。
4.设置拖拽容器可拖拽的范围,若未设置,则默认为当前窗口可视范围。在设置范围时使用Math.max/min来处理,而不是用if语句判断,用后者的话会导致快速拖拽时未达到容许范围边沿即停止的状况。
5.在拖拽过程中,可设置是否保留原来拖拽容器,当拖拽结束时,隐藏原来容器,默认不保留。
6.当拖拽时,可设置拖拽的容器是否透明及透明度是多少,默认为不透明。但若拖拽过程中设置保留原来拖拽容器,即keepOrigin:true,则设置透明度为50%。
7.单击鼠标右键、鼠标中键等不能拖动,仅单击鼠标左键可以拖动。IE鼠标左键为event.Button=1;Firefox鼠标左键为event.Button=0。
8.解决单击图片无法拖拽的问题:IE通过ev.returnValue=false来防止图片的事件,注意是放在document.onmousemove中,而Firefox通过ev.preventDefault();ev.stopPropagation();来防止图片的事件,但是却放在titleBar的mousedown事件中。
9.有一种情况,当浏览器窗口不是最大化时,你希望鼠标在浏览器外移动时浏览器里的拖拽容器仍然移动,这时就要使用鼠标事件捕获,IE中相应的是dragdiv.setCapture();与dragdiv.releaseCapture();而Firefox中相应的是window.captureEvents(Event.mousemove);与window.releaseEvents(dragdiv.mousemove)。
10.确保当每次拖拽时,拖拽容器中的z-index都不会被其他块元素覆盖。
- javascript实现拖拽的原理
- JavaScript 预解析的原理及实现
- JavaScript定时器实现的原理分析
- JavaScript实现原理简述
- Atitit.javascript 实现类的方式原理大总结
- 【转】Javascript DI!Angular依赖注入的实现原理
- Android JSBridge的原理与实现 (prompt和javascript)
- JavaScript模板引擎的应用场景及实现原理
- JavaScript动态检测密码强度的原理及实现
- JavaScript模板引擎的应用场景及实现原理
- 原生JavaScript中动画与特效的实现原理
- Android JSBridge的原理与实现 (prompt和javascript)
- JavaScript二叉查找树删除节点的实现原理
- Javascript Module Loader实现原理
- JavaScript闭包实现原理
- javascript内部原理篇[javascript实现继承]
- javascript内部原理篇[javascript实现聚合]
- JavaScript实现Html元素的拖拽
- 华硕笔记本nvidia显示设置不可用?
- 如何通过 bin setTitleEdgeInsets setImageEdgeInsets改变图片和文字的位置
- BZOJ 1009: [HNOI2008]GT考试【KMP上DP+矩阵快速幂
- Android基础控件之ListView详细使用讲解
- 自定义myScrollview
- javascript实现拖拽的原理
- C语言DAY11 - 指针patr1
- 判断是否有网
- 返回数组类型
- [Coursera 数字图像和视频处理基础 第二周]Signals and Systems
- 行人检测之DPM
- Java对象序列化
- Struts2.0学习笔记---拦截器拦截方法
- 迭代 iteration