接着上面
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;
}
}
}

解决方案 »

  1.   

    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);
    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+")";
    }function getposition(){}//-->
    </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 style='width:1;border-width:0px;color:white;font-family:webdings;' onclick="fold()">&nbsp;0</span></span><span  style='width:1;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span><SPAN STYLE="color: blue" onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">&nbsp;标题一</SPAN></div>
    <div class="cont" id="a">内aerghrthrt<br><br><br><br></div>
    </li>
    <li class="module">
    <div class="title"><span style='width:1;border-width:0px;color:white;font-family:webdings;' onclick="fold()">&nbsp;0</span></span><span  style='width:1;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span><SPAN STYLE="color: blue" onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">&nbsp;标题二</SPAN></div>
    <div class="cont" id="b">内容二</div>
    </li>
    <li class="module">
    <div class="title"><span style='width:1;border-width:0px;color:white;font-family:webdings;' onclick="fold()">&nbsp;0</span></span><span  style='width:1;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span><SPAN STYLE="color: blue" onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">&nbsp;标题三</SPAN></div>
    <div class="cont" id="c">内容三</div>
    </li>
    </ul>
    <ul class="column">
    <li class="module">
    <div class="title"><span style='width:1;border-width:0px;color:white;font-family:webdings;' onclick="fold()">&nbsp;0</span></span><span  style='width:1;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span><SPAN STYLE="color: blue" onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">&nbsp;标题九</SPAN></div>
    <div class="cont" id="d">内容九</div>
    </li>
    <li class="module">
    <div class="title"><span style='width:1;border-width:0px;color:white;font-family:webdings;' onclick="fold()">&nbsp;0</span></span><span  style='width:1;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span><SPAN STYLE="color: blue" onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">&nbsp;标题四</SPAN></div>
    <div class="cont"><div class="webNote" onblur="webNote.cannotEdit()" onclick="webNote.canEdit(event)">内容四</div><textarea class="webNote"></textarea></div>
    </li>
    <li class="module">
    <div class="title"><span style='width:1;border-width:0px;color:white;font-family:webdings;' onclick="fold()">&nbsp;0</span></span><span  style='width:1;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span><SPAN STYLE="color: blue" onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">&nbsp;标题五</SPAN></div>
    <div class="cont" id="f">内容五</div>
    </li>
    </ul>
    <ul class="column">
    <li class="module">
    <div class="title"><span style='width:1;border-width:0px;color:white;font-family:webdings;' onclick="fold()">&nbsp;0</span></span><span  style='width:1;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span><SPAN STYLE="color: blue" onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">&nbsp;标题六</SPAN></div>
    <div class="cont" id="g">内容六</div>
    </li>
    <li class="module">
    <div class="title"><span style='width:1;border-width:0px;color:white;font-family:webdings;' onclick="fold()">&nbsp;0</span></span><span  style='width:1;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span><SPAN STYLE="color: blue" onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">&nbsp;&nbsp;标题七</SPAN></div>
    <div class="cont" id="h">内容七</div>
    </li>
    <li class="module">
    <div class="title"><span style='width:1;border-width:0px;color:white;font-family:webdings;' onclick="fold()">&nbsp;0</span></span><span  style='width:1;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span><SPAN STYLE="color: blue" onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">&nbsp;标题八</SPAN></div>
    <div class="cont" id="i">内容八</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;QUANTA</div>
    </body>
    </html>