![修改为支持多个层拖动模式可以制作为[许愿墙]](https://1500zi.500zi.com/uploadfile/img/16/76/a44be3a0333bf63d2d5dbe581e92ebc9.jpg)
/thread-2784653-1-1.html
Div Move Temp 点我调用 拖动窗口
显示窗口 最大化窗口 点我调用 拖动窗口
显示窗口 最大化窗口 点我调用 拖动窗口
显示窗口 最大化窗口 点我调用 拖动窗口
显示窗口 最大化窗口 点我调用 拖动窗口
显示窗口 最大化窗口
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>DivMoveTemp</title>
<styletype="text/css">
body{}{
/**//*background-image:url(/web/download/image/wall_0201.jpg);*/
}
.InfoKuang{}{
position:absolute;
width:130px;
height:85px;
z-index:1;
filter:alpha(Opacity=60,style=0);
opacity:0.6;
padding:3px;
border:1pxdashed#000000;
z-index:5000;
font-size:9pt;
}
.InfoKuangul{}{
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;
}
.InfoKuangli{}{
height:24px;
padding:1px;
line-height:24px;
}
.main{}{width:500px;
height:300px;}
</style>
<scriptlanguage="javascript"type="text/javascript">
//通用移动Div类
//请保留一下我的信息,谢谢
//EditBySkybot
//QQ:35287352
functionTong_MoveDiv()
{
//参数说明
//id要移动的层ID
//Evt是event,window.event;要在FF中可以用e?e:window.event;
//T为int有数字是拖动没有是变大小
this.Move=function(Id,Evt,T)
{
if(Id=="")return;
varo=document.getElementById(Id);
if(!o)return;//如果这个东东不在
evt=Evt?Evt:window.event;
o.style.position="absolute";//设定他的样式为绝对定位
o.style.zIndex=200;//这里显示上下的
varobj=evt.srcElement?evt.srcElement:evt.target;//得到个原素使它在FF中也可以用
//得到当前对要移动对象的坐标
varw=o.offsetWidth;
varh=o.offsetHeight;
varl=o.offsetLeft;
vart=o.offsetTop;
vardiv=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)
{
varo=document.getElementById(Id+"temp");
if(!o)return;
evt=Evt?Evt:window.event;//都是FF才要这么写的
varrelLeft=evt.clientX-o.offsetLeft;//得到左边的宽度
varrelTop=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";
elseif(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";
elseif(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);
varo1=document.getElementById(Id);
if(!o1)return;
varl0=o.offsetLeft;
vart0=o.offsetTop;
varl=o1.offsetLeft;
vart=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]);
varo=document.getElementById(Id);
if(!o)return;
varsl=st=8;
vars_l=Math.abs(l0-l);
vars_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);
}
}
varMyMove=newTong_MoveDiv();
</script>
</head>
<body>
<divclass="main">
<divid="InfoKuang"class="InfoKuang"onmousedown="MyMove.Move('InfoKuang',event,1)">
<spanstyle="cursor:move;">点我调用拖动窗口</span>
<ul>
<li>
</li>
</ul>
<ul>
<li>
显示窗口
</li>
</ul>
<ul>
<li>
最大化窗口
</li>
</ul>
</div>
<divid="InfoKuang1"onmousedown="MyMove.Move('InfoKuang1',event,1)">
<spanstyle="cursor:move;">点我调用拖动窗口</span>
<ul>
<li>
</li>
</ul>
<ul>
<li>
显示窗口
</li>
</ul>
<ul>
<li>
最大化窗口
</li>
</ul>
</div>
<divid="InfoKuang2"onmousedown="MyMove.Move('InfoKuang2',event,1)">
<spanstyle="cursor:move;">点我调用拖动窗口</span>
<ul>
<li>
</li>
</ul>
<ul>
<li>
显示窗口
</li>
</ul>
<ul>
<li>
最大化窗口
</li>
</ul>
</div>
<divid="InfoKuang3"onmousedown="MyMove.Move('InfoKuang3',event,1)">
<spanstyle="cursor:move;">点我调用拖动窗口</span>
<ul>
<li>
</li>
</ul>
<ul>
<li>
显示窗口
</li>
</ul>
<ul>
<li>
最大化窗口
</li>
</ul>
</div>
<divid="InfoKuang4"onmousedown="MyMove.Move('InfoKuang4',event,1)">
<spanstyle="cursor:move;">点我调用拖动窗口</span>
<ul>
<li>
</li>
</ul>
<ul>
<li>
显示窗口
</li>
</ul>
<ul>
<li>
最大化窗口
</li>
</ul>
</div>
</div>
</body>
</html>
