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

调用方法
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><span style="cursor:move;">点我调用 拖动窗口</span> <ul> <li></li> </ul> <ul> <li> 显示窗口 </li> </ul> <ul> <li> 最大化窗口 </li> </ul></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 = newTong_MoveDiv（）; </script> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

首页 / 脚本样式 / JavaScript / javascript之DIV拖动类 支持在FF下拖动,调用简单

首页 / 脚本样式 / JavaScript / javascript之DIV拖动类支持在FF下拖动,调用简单