读书人
栏目▼

？类似于3721拖动DIV的层有关问题

发布时间： 2012-02-28 13:06:34 作者： rapoo

高手救命？类似于3721拖动DIV的层问题？
具体也讲不太清楚，请高手们把下面的HTML例子运行一下就明白了。

index1.html

<!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=gb2312 " />
<title> MyWeb </title>
<link href= "Style/MyCss.css " rel= "stylesheet " type= "text/css ">
<script type= "text/javascript " src= "Script/Function1.js "> </script>
</head>

<body>
<!--header start-->
<div id= "header " class= "HEADER ">
<ul>
<li onClick= "javascript:location.href= 'BBS/Index.html ' "> 论坛   </li>
<li onClick= "javascript:Default() "> 默认版面 |  </li>
<li onClick= "javascript:location.href= 'Search.html ' "> 资源搜索 |  </li>
<li onClick= "location.href= 'Register.html ' "> 用户注册 |  </li>
<li onClick= "location.href= 'Register.html ' "> 用户登陆 |  </li>
</ul>
</div>
<!--//header end-->

<!--body start-->
<div id= "body " class= "BODY ">
<div id= "left " class= "LEFT ">
<div class= "MODULE " id= "Blog ">
<div class= "MODULE_TITLE " id= "Blog_Title " onMouseDown= "DragStart(event, 'Blog ') ">
<span class= "TITLE_LEFT "> 热门博客 </span>
<span class= "TITLE_RIGHT ">
<img src= "Images/unlock.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "Blog_Lock " title= "锁定 " onClick= "ck( 'Blog ') ">
<img src= "Images/max.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "Blog_Size " title= "最小化 " onClick= "cm( 'Blog ') ">
<img src= "Images/icon_close.gif " width= "13 " height= "13 " style= "cursor:pointer; " onClick= "ce( 'Blog ') "> </span> </div>
<div class= "MODULE_CONTENT " id= "Blog_Content ">
<ul>
<li> 暴发户辈出的时代，谁的屁股指挥脑袋 </li>
<li> 惊魂82小时！那个捆炸药包的女人 </li>
</ul>
</div>
</div>
<div class= "MODULE " id= "Ad ">
<div class= "MODULE_TITLE " id= "Ad_Title " onMouseDown= "DragStart(event, 'Ad ') ">
<span class= "TITLE_LEFT "> 广告列表 </span>
<span class= "TITLE_RIGHT ">
<img src= "Images/unlock.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "Ad_Lock " title= "锁定 " onClick= "ck( 'Ad ') ">


<img src= "Images/max.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "Ad_Size " title= "最小化 " onClick= "cm( 'Ad ') ">
<img src= "Images/icon_close.gif " width= "13 " height= "13 " style= "cursor:pointer; " onClick= "ce( 'Ad ') "> </span> </div>
<div class= "MODULE_CONTENT " id= "Ad_Content ">
<ul>
<li> 暴发户辈出的时代，谁的屁股指挥脑袋 </li>
<li> 惊魂82小时！那个捆炸药包的女人 </li>
</ul>
</div>
</div>
</div>

<div id= "middle " class= "MIDDLE ">
<div class= "MODULE " id= "News ">
<div class= "MODULE_TITLE " id= "News_Title " onMouseDown= "DragStart(event, 'News ') ">
<span class= "TITLE_LEFT "> 新闻列表 </span>
<span class= "TITLE_RIGHT ">
<img src= "Images/unlock.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "News_Lock " title= "锁定 " onClick= "ck( 'News ') ">
<img src= "Images/max.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "News_Size " title= "最小化 " onClick= "cm( 'News ') ">
<img src= "Images/icon_close.gif " width= "13 " height= "13 " style= "cursor:pointer; " onClick= "ce( 'News ') "> </span> </div>
<div class= "MODULE_CONTENT " id= "News_Content ">
<ul>
<li> 暴发户辈出的时代，谁的屁股指挥脑袋 </li>
<li> 惊魂82小时！那个捆炸药包的女人 </li>
</ul>
</div>
</div>
<div class= "MODULE " id= "Link ">
<div class= "MODULE_TITLE " id= "Link_Title " onMouseDown= "DragStart(event, 'Link ') ">
<span class= "TITLE_LEFT "> 友情链接 </span>
<span class= "TITLE_RIGHT ">
<img src= "Images/unlock.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "Link_Lock " title= "锁定 " onClick= "ck( 'Link ') ">
<img src= "Images/max.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "Link_Size " title= "最小化 " onClick= "cm( 'Link ') ">
<img src= "Images/icon_close.gif " width= "13 " height= "13 " style= "cursor:pointer; " onClick= "ce( 'Link ') "> </span> </div>
<div class= "MODULE_CONTENT " id= "Link_Content ">
<ul>
<li> 暴发户辈出的时代，谁的屁股指挥脑袋 </li>
<li> 惊魂82小时！那个捆炸药包的女人 </li>
</ul>
</div>
</div>
</div>

<div id= "right " class= "RIGHT ">


<div class= "MODULE " id= "Music ">
<div class= "MODULE_TITLE " id= "Music_Title " onMouseDown= "DragStart(event, 'Music ') ">
<span class= "TITLE_LEFT "> 音乐列表 </span>
<span class= "TITLE_RIGHT ">
<img src= "Images/unlock.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "Music_Lock " title= "锁定 " onClick= "ck( 'Music ') ">
<img src= "Images/max.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "Music_Size " title= "最小化 " onClick= "cm( 'Music ') ">
<img src= "Images/icon_close.gif " width= "13 " height= "13 " style= "cursor:pointer; " onClick= "ce( 'Music ') "> </span> </div>
<div class= "MODULE_CONTENT " id= "Music_Content ">
<ul>
<li> 暴发户辈出的时代，谁的屁股指挥脑袋 </li>
<li> 惊魂82小时！那个捆炸药包的女人 </li>
</ul>
</div>
</div>
<div class= "MODULE " id= "BBS ">
<div class= "MODULE_TITLE " id= "BBS_Title " onMouseDown= "DragStart(event, 'BBS ') ">
<span class= "TITLE_LEFT "> 论坛 </span>
<span class= "TITLE_RIGHT ">
<img src= "Images/unlock.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "BBS_Lock " title= "锁定 " onClick= "ck( 'BBS ') ">
<img src= "Images/max.gif " width= "13 " height= "13 " style= "cursor:pointer; " id= "BBS_Size " title= "最小化 " onClick= "cm( 'BBS ') ">
<img src= "Images/icon_close.gif " width= "13 " height= "13 " style= "cursor:pointer; " onClick= "ce( 'BBS ') "> </span> </div>
<div class= "MODULE_CONTENT " id= "BBS_Content ">
<ul>
<li> 暴发户辈出的时代，谁的屁股指挥脑袋 </li>
<li> 惊魂82小时！那个捆炸药包的女人 </li>
</ul>
</div>
</div>
</div>
</div>
<!--//body end-->

<!--footer start-->
<div id= "footer " class= "FOOTER ">
MyWeb.com.cn © 2007 版权所有 不得转载 京ICP证000000号 网络110报警 </div>
<!--//footer end-->
</body>
</html>

下面还有....JS文件和CSS样式表文件.....

[解决办法]
死循环错误

[解决办法]
如果不懂JS的话建议直接用dreamwaver来做吧


-----------------------
没有最好,只有更好!
http://www.crossgo.com
[解决办法]
代码如下：这个应该是你要的效果。自己应该可以修改了。



<html>
<head>
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
height:20px;
padding-left:5px;
font-weight:bold;
}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<script defer>
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
var Drag={dragged:false,
ao:null,
tdiv:null,
dragStart:function(){
Drag.ao=event.srcElement;
if((Drag.ao.tagName== "TD ")||(Drag.ao.tagName== "TR ")){
Drag.ao=Drag.ao.offsetParent;
Drag.ao.style.zIndex=100;
}else
return;
Drag.dragged=true;
Drag.tdiv=document.createElement( "div ");
Drag.tdiv.innerHTML=Drag.ao.outerHTML;
Drag.ao.style.border= "1px dashed red ";
Drag.tdiv.style.display= "block ";
Drag.tdiv.style.position= "absolute ";
Drag.tdiv.style.filter= "alpha(opacity=70) ";
Drag.tdiv.style.cursor= "move ";
Drag.tdiv.style.border= "1px solid #000000 ";
Drag.tdiv.style.width=Drag.ao.offsetWidth;
Drag.tdiv.style.height=Drag.ao.offsetHeight;
Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
document.body.appendChild(Drag.tdiv);
Drag.lastX=event.clientX;
Drag.lastY=event.clientY;
Drag.lastLeft=Drag.tdiv.style.left;
Drag.lastTop=Drag.tdiv.style.top;
},

draging:function(){//重要:判断MOUSE的位置
if(!Drag.dragged||Drag.ao==null)return;
var tX=event.clientX;
var tY=event.clientY;
Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
for(var i=0;i <parentTable.cells.length;i++){
var parentCell=Drag.getInfo(parentTable.cells[i]);
if(tX> =parentCell.left&&tX <=parentCell.right&&tY> =parentCell.top&&tY <=parentCell.bottom){
var subTables=parentTable.cells[i].getElementsByTagName( "table ");
if(subTables.length==0){
if(tX> =parentCell.left&&tX <=parentCell.right&&tY> =parentCell.top&&tY <=parentCell.bottom){
parentTable.cells[i].appendChild(Drag.ao);
}
break;
}
for(var j=0;j <subTables.length;j++){
var subTable=Drag.getInfo(subTables[j]);
if(tX> =subTable.left&&tX <=subTable.right&&tY> =subTable.top&&tY <=subTable.bottom){
parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
break;
}else{
parentTable.cells[i].appendChild(Drag.ao);
}
}
}
}
}
,
dragEnd:function(){
if(!Drag.dragged)return;
Drag.dragged=false;
Drag.mm=Drag.repos(150,15);
Drag.ao.style.borderWidth= "0px ";
Drag.ao.style.borderTop= "1px solid #3366cc ";
Drag.tdiv.style.borderWidth= "0px ";
Drag.ao.style.zIndex=1;
},
getInfo:function(o){//取得坐标
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
o=o.offsetParent;
}
to.right=to.left+twidth;


to.bottom=to.top+theight;
return to;
},
repos:function(aa,ab){
var f=Drag.tdiv.filters.alpha.opacity;
var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
var kf=f/ab;
return setInterval(function(){if(ab <1){
clearInterval(Drag.mm);
Drag.tdiv.removeNode(true);
Drag.ao=null;
return;
}
ab--;
tl-=kl;
tt-=kt;
f-=kf;
Drag.tdiv.style.left=parseInt(tl)+ "px ";
Drag.tdiv.style.top=parseInt(tt)+ "px ";
Drag.tdiv.filters.alpha.opacity=f;
}
,aa/ab)
},
inint:function(){//初始化
for(var i=0;i <parentTable.cells.length;i++){
var subTables=parentTable.cells[i].getElementsByTagName( "table ");
for(var j=0;j <subTables.length;j++){
if(subTables[j].className!= "dragTable ")break;
subTables[j].rows[0].className= "dragTR ";
subTables[j].rows[0].attachEvent( "onmousedown ",Drag.dragStart);
}
}
document.onmousemove=Drag.draging;
document.onmouseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();

function _show(str){
var w=window.open( ' ', ' ');
var d=w.document;
d.open();
str=str.replace(/=(?! ")(.*?)(?! ")( |> )/g, "=\ "$1\ "$2 ");
str=str.replace(/( <)(.*?)(> )/g, " <span style= 'color:red; '> <$2> </span> <br /> ");
str=str.replace(/\r/g, " <br /> \n ");
d.write(str);
}
</script>
</head>
<body>
<table border= "0 " cellpadding= "0 " cellspacing= "10 " width= "100% " height=500 id= "parentTable ">
<tr >
<td width= "25% " valgin= "top ">
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> <b> GMAIL </b> </td>
</tr>
<tr>
<td> 暂时无法显示GMAIL内容 </td>
<tr>
</table> <table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> 新浪体育 </td>
</tr>
<tr>
<td> 解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步 <br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭 </td>
<tr>
</table>
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> 焦点 </td>
</tr>
<tr>
<td> 京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选
解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 ? </td>
<tr>
</table>
</td>
<td width= "25% ">
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> 中关村在线 </td>
</tr>
<tr>
<td> 新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td>
<tr>
</table> </td>
<td width= "25% ">
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> 网易商业 </td>


</tr>
<tr>
<td> 上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市 </td>
<tr>
</table> <table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> 黑可天下 </td>
</tr>
<tr>
<td> 上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市 </td>
<tr>
</table>
</td>
</tr>
</table>
<input type= "button " value= "SHOW " onClick= "_show(document.documentElement.innerHTML) " />
</body>
</html>

[解决办法]
这个程序不兼容firefox..
[解决办法]
http://www.never-online.net/blog/article.asp?id=107
[解决办法]
哈，写完了的说。。
http://community.csdn.net/Expert/topic/5500/5500935.xml?temp=.2467615

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net