<!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" />
<meta http-equiv="content-language" content="zh-cn" />
<title>web开发技术</title>
<script type="text/javascript">
<!--
var IE=false,FF=false,W=window,D=document,H,B,GET="getElementsByTagName",GEI="getElementById",qq=0;
function fold(){
var e;
e
=fixE(e);
if(e)element=fixElement(e);
element
=element.parentNode.parentNode;
element.className
=element.className.indexOf("hide")>0?"module":"module hide";
}
var Drag={
draging : 
false,
x : 
0,
y : 
0,
element : 
null,
fDiv : 
null,
ghost : 
null,
addEvent : 
function(){var a=D[GET]("li");for(var i=a.length-1;i>-1;i--)if(a[i].className=="module")a[i].onmousedown=Drag.dragStart;},
ix:
2,iy:7,
ox:
6,oy:7,
fx:
6,fy:6,
dragStart : 
function (e){
   
if(Drag.draging)return;
   
var e;
   e
=fixE(e);
   
if(e)element=fixElement(e);

   
/*********
   var k,s="";
   for(k in element)s+=k+" : "+element[k]+"<br/>";
   D.getElementById("bbb").innerHTML=s;
   *********
*/
   D.getElementById(
"aaa").innerHTML=element.parentNode.offsetTop+ ","+element.parentNode.offsetHeight;
   
//测试
   if(element.className!="title")return;
   element
=element.parentNode;
   Drag.element
=element;
   
//以上获得当前移动的模块
   Drag.x=e.layerX?e.layerX+Drag.fx:(IE?e.x+Drag.ix:e.offsetX+Drag.ox);
   Drag.y
=e.layerY?e.layerY+Drag.fy:(IE?e.y+Drag.iy:e.offsetY+Drag.oy);
   
//鼠标相对于模块的位置
   Drop.measure();
   
if(e.layerX){Drag.floatIt(e);Drag.drag(e);}//fix FF
   B.style.cursor="move";
   D.onmousemove
=Drag.drag;
   D.ondragstart
=function(){window.event.returnValue = false;}
   D.onselectstart
=function(){window.event.returnValue = false;};
   D.onselect
=function(){return false};
   D.onmouseup
=element.onmouseup=Drag.dragEnd;
   element.onmousedown
=null;
},
drag : 
function (e){
   
var e;
   e
=fixE(e);
   
if(!Drag.fDiv)Drag.floatIt(e);//for IE & Opera
   var x=e.clientX,y=e.clientY;
   Drag.fDiv.style.top
=y+H.scrollTop-Drag.y+"px";
   Drag.fDiv.style.left
=x+H.scrollLeft-Drag.x+"px";
   Drop.drop(x,y);
   
//statu(e);
},
dragEnd : 
function (e){
   B.style.cursor
="";
   D.ondragstart
=D.onmousemove=D.onselectstart=D.onselect=D.onmouseup=null;
   Drag.element.onmousedown
=Drag.dragStart;
   
if(!Drag.draging)return;
   Drag.ghost.parentNode.insertBefore(Drag.element,Drag.ghost);
   Drag.ghost.parentNode.removeChild(Drag.ghost);
   B.removeChild(Drag.fDiv);
   Drag.fDiv
=null;
   Drag.draging
=false;
   Drop.init(D[GEI](
"container"));
},
floatIt : 
function(e){
   
var e,element=Drag.element;
   
var ghost=D.createElement("LI");
   Drag.ghost
=ghost;
   ghost.className
="module ghost";
   ghost.style.height
=element.offsetHeight-2+"px";
   element.parentNode.insertBefore(ghost,element);
   
//创建模块占位框
   var fDiv=D.createElement("UL");
   Drag.fDiv
=fDiv;
   fDiv.className
="float";
   B.appendChild(fDiv);
   fDiv.style.width
=ghost.parentNode.offsetWidth+"px";
   fDiv.appendChild(element);
   
//创建容纳模块的浮动层
   Drag.draging=true;
}
}
var Drop={
root : 
null,
index : 
null,
column : 
null,
init : 
function(it){
   
if(!it)return;
   Drop.root
=it;
   it.firstItem
=it.lastItem=null;
   
var a=it[GET]("ul");
   
for(var i=0;i<a.length;i++){
    
if(a[i].className!="column")continue;
    
if(it.firstItem==null){
     it.firstItem
=a[i];
     a[i].previousItem
=null;
    }
else{
     a[i].previousItem
=a[i-1];
     a[i
-1].nextItem=a[i];
    }
    a[i].nextItem
=null;
    it.lastItem
=a[i];
    a[i].index
=i;
    a[i].firstItem
=a[i].lastItem=null;
    
var b=a[i][GET]("li");
    
for(var j=0;j<b.length;j++){
     
if(b[j].className.indexOf("module")==-1)continue;
     
if(a[i].firstItem==null){
      a[i].firstItem
=b[j];
      b[j].previousItem
=null;
     }
else{
      b[j].previousItem
=b[j-1];
      b[j
-1].nextItem=b[j];
     }
     b[j].nextItem
=null;
     a[i].lastItem
=b[j];
     b[j].index
=i+","+j;
    }
   }
},
measure : 
function(){
   
if(!Drop.root)return;
   
var currentColumn=Drop.root.firstItem;
   
while(currentColumn){
    
var currentModule=currentColumn.firstItem;
    
while(currentModule){
     currentModule.minY
=currentModule.offsetTop;
     currentModule.maxY
=currentModule.minY+currentModule.offsetHeight;
     currentModule
=currentModule.nextItem;
    }
    currentColumn.minX
=currentColumn.offsetLeft;
    currentColumn.maxX
=currentColumn.minX+currentColumn.offsetWidth;
    currentColumn
=currentColumn.nextItem;
   }
   Drop.index
=Drag.element.index;
},
drop : 
function(x,y){
   
if(!Drop.root)return;
   
var x,y,currentColumn=Drop.root.firstItem;
   
while(x>currentColumn.maxX)if(currentColumn.nextItem)currentColumn=currentColumn.nextItem;else break;
   
var currentModule=currentColumn.lastItem;
   
if(currentModule)while(y<currentModule.maxY){
    
if(y>currentModule.minY-12){
     
if(Drop.index==currentModule.index)return;
     Drop.index
=currentModule.index;
     
if(currentModule.index==Drag.element.index){if(currentModule.nextItem)currentModule=currentModule.nextItem;else break;}
     currentColumn.insertBefore(Drag.ghost,currentModule);
     Drop.column
=null;
     window.status
=qq++;
     
return;
    }
else if(currentModule.previousItem)currentModule=currentModule.previousItem;else return;
   }
   
if(Drop.column==currentColumn.index)return;
   currentColumn.appendChild(Drag.ghost);
   Drop.index
=0;
   Drop.column
=currentColumn.index;
   window.status
=qq++;
}
}
var webNote={
obj : 
null,
canEdit : 
function(e){
   
var e,element;
   e
=fixE(e);
   element
=fixElement(e);
   
if(element.className!='webNote')return;
   
if(typeof element.contentEditable!="undefined"){
    element.contentEditable
=true;
    element.style.borderColor
='red';
    element.focus();
    webNote.obj
=element;
   }
},
cannotEdit : 
function(){
   
if(!webNote.obj)return;
   
if(typeof webNote.obj.contentEditable!="undefined"){
    webNote.obj.style.borderColor
='#ffffe0';
    webNote.obj.contentEditable
=false;
    webNote.obj
=null;
   }
}
}
function fixE(e){var e;e=e?e:(window.event?window.event:null);return e}
function fixElement(e){var e;return e.target?(e.target.nodeType==3?e.target.parentNode:e.target):e.srcElement;}
onload
=function(){
B
=D[GET]("body")[0];
H
=D[GET]("html")[0];
Drop.init(D[GEI](
"container"));
Drag.addEvent();
}
function statu(e){
var e,element;
element
=fixElement(e);
var aa=D.getElementById("aaa");
aa.innerHTML
="e.xy:("+e.x+","+e.y+")<br/>e.offsetXY:("+e.offsetX+","+e.offsetY+")<br/>e.clientXY:("+e.clientX+","+e.clientY+")<br/>element.offsetLeftTop:("+element.offsetLeft+","+element.offsetTop+")<br/>e.layerXY:("+e.layerX+","+e.layerY+")";
}
//-->
</script>
<style type="text/css">
body,table,td,th,input,textarea,button,select
{font:13px/16px Verdana,"宋体",sans-serif;}
table
{border-collapse:collapse;}
p
{margin:0px;}
.container
{margin:8px;}
.column
{width:33%;margin:0px;padding:0px;float:left;overflow:hidden;}
.module
{margin:5px;padding:0px;border:1px solid #dcd;position:relative;background-color:white;list-style:none;}
.title
{background-color:#edf;padding:1px 0px;width:100%;overflow:hidden;cursor:move;z-index:0;font-weight:bold;}
.cont
{padding:3px;overflow:hidden;}
.hide .cont
{display:none;}
.pageTitle
{font-weight:bold;text-align:center;}
input.pageTitle
{display:none;border:0px;padding:0px;width:100%;}
.webNote
{background-color:#ffffe0;border:1px solid #ffffe0;}
textarea.webNote
{display:none;overflow:hidden;padding:0px;border:0px;padding:0px;}
.ghost
{border:1px dashed red;}
.float
{position:absolute;z-index:100;margin:0px;padding:0px;overflow:hidden;list-style:none;-moz-opacity:.75;filter:Alpha(opacity=75);}
</style>
<!--[if IE]>
<script type="text/javascript">
IE=true;
</script>
<style type="text/css">
input.pageTitle{margin:-1px;}
</style>
<![endif]
-->
<![if !IE]><![endif]>
</head>
<body>
<center><span class="pageTitle" onclick="with(this.nextSibling){value=this.innerHTML;style.display='block';focus()};this.style.display='none';">You can input a topic here!</span><input class="pageTitle" onblur="with(this.previousSibling){D.title=innerHTML=this.value?this.value:'Demo';style.display='block';};this.style.display='none'" /></center>
<div class="container" id="container">
<ul class="column">
   
<li class="module">
    
<div class="title"><span onclick="fold()">+</span>&nbsp;Coodinate</div>
    
<div class="cont" id="aaa">content</div>
   
</li>
   
<li class="module">
    
<div class="title"><span onclick="fold()">+</span>&nbsp;contentEditable</div>
    
<div class="cont" onclick="alert('this.contentEditable:'+this.contentEditable)">click here</div>
   
</li>
   
<li class="module">
    
<div class="title"><span onclick="fold()">+</span>&nbsp;long long ago</div>
    
<div class="cont">有形者 生于无有 有归于无<br/>是以 凡妄<br/>若是能见诸相非</div>
   
</li>
</ul>
<ul class="column">
   
<li class="module">
    
<div class="title"><span onclick="fold()">+</span>&nbsp;this.parentNode</div>
    
<div class="cont"><button onclick="alert(this.parentNode.parentNode.parentNode.innerHTML)">parentNode</button></div>
   
</li>
   
<li class="module">
    
<div class="title"><span onclick="fold()">+</span>&nbsp;webNote</div>
    
<div class="cont"><div class="webNote" onblur="webNote.cannotEdit()" onclick="webNote.canEdit(event)">You can note something here.<br/><br/>从前有座山</div><textarea class="webNote"></textarea></div>
   
</li>
   
<li class="module">
    
<div class="title"><span onclick="fold()">+</span>&nbsp;Google</div>
    
<div class="cont"><center><href="http://www.google.com/" style="font:bold 31px/2 Arial;">Google</a></center></div>
   
</li>
</ul>
<ul class="column">
   
<li class="module">
    
<div class="title"><span onclick="fold()">+</span>&nbsp;pia~~</div>
    
<div class="cont">十里平湖霜满天<br/>寸寸青丝愁华年<br/>对月形单忘相护</div>
   
</li>
   
<li class="module">
    
<div class="title"><span onclick="fold()">+</span>&nbsp;biu~~</div>
    
<div class="cont">您好!<br/>主人不在,您可以在biu~的一声后留言</div>
   
</li>
   
<li class="module">
    
<div class="title"><span onclick="fold()">+</span>&nbsp;无话可说</div>
    
<div class="cont" id="bbb">(字数不够,再吃一遍)</div>
   
</li>
</ul>
</div>
<div style="font-size:10px;line-height:14px;clear:both;margin:6px 3%;text-align:center;border:1px solid #eee;">&copy;http://www.itokit.com</div>
</body>
</html>
posted on 2009-06-12 22:24  钱途无梁  阅读(628)  评论(1编辑  收藏  举报