这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现拖拽的方法, 结合实例形式分析了 JS 拖拽的实现原理、实现技巧与相关注意事项, 需要的朋友可以参考下
本文实例分析了 JS 实现拖拽的方法。分享给大家供大家参考,具体如下:
分析:
1. 鼠标按下,拖拽开始,鼠标移动,拖拽进行,鼠标抬起,拖拽结束(三个事件)
2. 被拖动元素与鼠标之间的位置在拖动过程中始终不变,利用这个原理,被拖动元素的位置就是鼠标的左(上)边距 - 鼠标与被拖动元素之间的距离
注意:onmousemove 应该是在 onmousedown 发生时进行,不然不需要点击也能拖动了。
用户可能会将拖动层脱出窗口外。
核心代码:
- window.onload=function(){
- var box=document.getElementById("div");
- var disX;
- var disY;
- box.onmousedown=function(ev){ //如果三个事件都用在box上,拖得快一点,鼠标脱离移动层,移动层就拖不动了
- var oEvent=ev||event;
- disX=oEvent.clientX-box.offsetLeft;
- disY=oEvent.clientY-box.offsetTop;
- document.onmousemove=function(ev){
- var oEvent=ev||event;
- var l=oEvent.clientX-disX;
- var t=oEvent.clientY-disY;
- if(l<0){
- l=0;
- }else if(l>document.documentElement.clientWidth-box.offsetWidth){
- l=document.documentElement.clientWidth-box.offsetWidth;
- }
- if(t<0){
- t=0;
- }else if(t>document.documentElement.clientHeight-box.offsetHeight){
- t=document.documentElement.clientHeight-box.offsetHeight;
- }
- box.style.left=l+'px';
- box.style.top=t+'px';
- };
- document.onmouseup=function(){
- document.onmousemove=null;
- document.onmouseup=null; //鼠标抬起来后,onmouseup事件本身也没意义了,所以最好清理掉
- };
- return false; //阻止默认行为,空的div在低版本ff下,第二次拖动手型会变异常
- };
- }
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0524/329363.html