javascript之DIV拖动类支持在FF下拖动,调用简单

更新时间：2007年08月26日 15:05:16 作者：

调用方法
onmousedown="MyMove.Move('InfoKuang',event,1)"
想问的问题是:如何当我拖到一个指定的地方时层自动吸到指定地方.
相当于拖拽布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div Move Temp</title> <style> #InfoKuang {     position:absolute;     width:130px;     height:85px;     z-index:1;     filter:alpha(Opacity=60,style=0);     opacity:0.6;     padding: 3px;     border: 1px dashed #000000;     z-index:5000;     bottom:31px;                 font-size:9pt;                            } #InfoKuang ul {     margin: 1px;     padding: 0px;     border-top-width: 1px;     border-right-width: 1px;     border-bottom-width: 1px;     border-left-width: 1px;     border-top-style: none;     border-right-style: none;     border-bottom-style: solid;     border-left-style: none;     border-top-color: #000000;     border-right-color: #000000;     border-bottom-color: #000000;     border-left-color: #000000;     color: #000000;     background-color:#0faead; } #InfoKuang li {     height:24px;     padding: 1px;     line-height: 24px; } </style> </head> <body> <div id="InfoKuang" onmousedown="MyMove.Move('InfoKuang',event,1)"> <span style="cursor:move;">点我调用 拖动窗口</span>     <ul>         <li>                  </li>     </ul>     <ul>         <li>         显示窗口         </li>     </ul>     <ul>         <li>         最大化窗口         </li>     </ul> </div> </body> <script language="javascript"  type="text/javascript"> //通用 移动 Div 类 //请保留一下我的信息,谢谢 //Edit By Skybot //QQ:35287352 function Tong_MoveDiv() {     //参数说明     // id 要移动的层ID      // Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;     // T 为 int 有数字是拖动 没有是变大小     this.Move=function(Id,Evt,T)     {         if(Id=="") return;         var o = document.getElementById(Id);         if(!o) return;//如果这个东东不在         evt = Evt ? Evt : window.event;         o.style.position = "absolute";//设定他的样式为绝对定位         o.style.zIndex = 200;//这里显示上下的         var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素  使它在FF中也可以用         //得到当前对要移动对象的 坐标         var w = o.offsetWidth;         var h = o.offsetHeight;         var l = o.offsetLeft;         var t = o.offsetTop;         var div = document.createElement("DIV");//新原素DIV         document.body.appendChild(div);         div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter； 注意opacity 是FF中的 Opacity         div.setAttribute("id", Id +"temp");                  if(T)//看看是拖动还是 变大小         {             this.Move_OnlyMove(Id,evt);         }         else         {                      }     }          //移动函数     //参数 Id  要移动的层ID      //Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;     this.Move_OnlyMove = function(Id,Evt)     {         var o = document.getElementById(Id+"temp");         if(!o) return;         evt = Evt?Evt:window.event;//都是FF 才要这么写的         var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度         var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度         //抓取 事件         if (!window.captureEvents)         {             o.setCapture(); //指定  抓取 事件                  }         else         {             window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);         }                  //文档的 onmousemove 事件         document.onmousemove = function(e)         {             if (!o) return;             e = e ? e : window.event;             if (e.clientX - relLeft <= 0)                 o.style.left = 0 +"px";             else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)                 o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";             else                 o.style.left = e.clientX - relLeft +"px";             if (e.clientY - relTop <= 1)                 o.style.top = 1 +"px";             else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)                 o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";             else                 o.style.top = e.clientY - relTop +"px";         }                  //文档的 onmouseup 事件         document.onmouseup = function()         {             if (!o) return;             if (!window.captureEvents)                 o.releaseCapture();             else                 window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);             var o1 = document.getElementById(Id);             if (!o1) return;             var l0 = o.offsetLeft;             var t0 = o.offsetTop;             var l = o1.offsetLeft;             var t = o1.offsetTop;                 MyMove.Move_e(Id, l0 , t0, l, t);             document.body.removeChild(o);             o = null;         }         }          this.Move_e = function(Id, l0 , t0, l, t)     {         if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);         var o = document.getElementById(Id);         if (!o) return;         var sl = st = 8;         var s_l = Math.abs(l0 - l);         var s_t = Math.abs(t0 - t);         if (s_l - s_t > 0)             if (s_t)                 sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;             else                 sl = 0;         else             if (s_l)                 st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;             else                 st = 0;         if (l0 - l < 0) sl *= -1;         if (t0 - t < 0) st *= -1;         if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;         if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;         if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;         if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;         if (s_l == 0 && s_t == 0) return;         if (Math.abs(l + sl - l0) < 2)             o.style.left = l0 +"px";         else             o.style.left = l + sl +"px";         if (Math.abs(t + st - t0) < 2)              o.style.top = t0 +"px";         else             o.style.top = t + st +"px";         window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1);     }           } var MyMove = new  Tong_MoveDiv(); </script> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

写的htc的数据表格
写的htc的数据表格...
2007-01-01
JS中==、===你分清楚了吗
这篇文章主要介绍了JS中==、===你分清楚了吗,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
JS封装cookie操作函数实例(设置、读取、删除)
这篇文章主要介绍了JS封装cookie操作函数,以实例形式分析了JavaScript实现针对cookie的设置、获取及删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
js中实例与对象的区别讲解
今天小编就为大家分享一篇关于js中实例与对象的区别讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
判断滚动条滑到底部触发事件(实例讲解)
下面小编就为大家带来一篇判断滚动条滑到底部触发事件的实例讲解。具有很好的参考价值。一起跟随小编过来看看吧，希望对大家有所帮助
2017-11-11
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
这篇文章主要介绍了详解使用Nuxt.js快速搭建服务端渲染(SSR)应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
详解javascript new的运行机制
这篇文章主要介绍了javascript new的运行机制的相关资料,需要的朋友可以参考下
2016-01-01
JS实现控制表格内指定单元格内容对齐的方法
这篇文章主要介绍了JS实现控制表格内指定单元格内容对齐的方法,涉及javascript操作表格单元格内容样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
实例详解JavaScript静态作用域和动态作用域
作用域是指程序源代码中定义变量的区域,作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限,这篇文章主要给大家介绍了关于JavaScript静态作用域和动态作用域的相关资料,需要的朋友可以参考下
2021-10-10
JS实现新浪微博效果带遮罩层的弹出框代码
这篇文章主要介绍了JS实现新浪微博效果带遮罩层的弹出框代码,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10