1. 论坛系统升级为Xenforo，欢迎大家测试！
    排除公告

发现一些比较NB的JS拖放特效的演示，有想法的自己把代码搞下来吧

本帖由 notnull 于 2006-05-08 发布。版面名称：前端开发

  1. notnull

    notnull New Member

    注册:
    2005-09-27
    帖子:
    11,720
    赞:
    37
    #1 notnull, 2006-05-08
  2. srsman

    srsman Active Member

    注册:
    2005-11-08
    帖子:
    1,920
    赞:
    6
    我记得有一个国外的CMS的模板编辑就是这种形式的！很直观方便！
     
    #2 srsman, 2006-05-09
  3. 帅气十足也

    帅气十足也 Active Member

    注册:
    2006-03-09
    帖子:
    1,511
    赞:
    9
    我有一个,兼容IE和火狐的...
    index.html
    代码:
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自定义排版兼容ie和firefox</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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;
}
</style>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
  <tr>
    <td width="12%" 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>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
        <tr>
      </table>      
      <table border=0 class="dragTable" cellspacing="0">
        <tr>
          <td>新浪体育</td>
        </tr>
        <tr>
          <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/>
            印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td>
        <tr>
            </table></td>
    <td width="6%" valgin="top"><table border=0 class="dragTable" cellspacing="0">
      <tr>
        <td>中关村在线</td>
      </tr>
      <tr>
        <td>新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td>
      <tr>
        </table></td>
    <td width="7%" valgin="top"><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>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 &raquo;哈马斯已有总理人选 
            解放日报报业集团 - 所有 489 相关报道 &raquo;陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 &raquo;</td>
        <tr>
            </table></td>
  </tr>
</table>

<script defer>

if (/Mozilla\/5\.0/.test(navigator.userAgent)){
document.write('<script type="text/javascript" src="mozInnerHTML.js"></sc' + 'ript>');
}
/**** 拖拽效果 ********** E-MAIL:[email protected] **** QQ:81595945 ***** 2006-4-6 11:04 *****/
	
	var Drag={dragged:false,
		ao:null,
		tdiv:null,
dragStart:function(evt){
	var evt = (evt) ? evt : ((window.event) ? window.event : "");
	if (evt) {
		 Drag.ao = (evt.target) ? evt.target : evt.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.lastMouseX=evt.clientX;
	Drag.lastMouseY=evt.clientY;
	Drag.lastLeft=Drag.tdiv.style.left;
	Drag.lastTop=Drag.tdiv.style.top;

}
,
 draging:function(tevt){//重要:判断MOUSE的位置
	if(!Drag.dragged||Drag.ao==null)return;
	var tevt = (tevt) ? tevt : ((window.event) ? window.event : "");
	var tX=tevt.clientX;
	var tY=tevt.clientY;

	Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastMouseX;
	Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastMouseY;
	var parentTable=document.getElementById("parentTable");
	for(var r=0;r<parentTable.rows.length;r++){//循环出 parentTable 有多少行
		for(var i=0;i<parentTable.rows[r].cells.length;i++){//循环出 parentTable 有多少列
			var parentCell=Drag.getInfo(parentTable.rows[r].cells);
			if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
				var subTables=parentTable.rows[r].cells.getElementsByTagName("table");
				if(subTables.length==0){
					if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
						parentTable.rows[r].cells.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.rows[r].cells.insertBefore(Drag.ao,subTables[j]);
						break;
					}else{
						parentTable.rows[r].cells.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 o=Drag.tdiv.style.opacity;
	var f=Drag.tdiv.style.filter;
	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.parentNode.removeChild(Drag.tdiv)
							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.style.opacity=o;
					Drag.tdiv.style.filter=f;
				}
,aa/ab)
},
 inint:function(){//初始化
 
	var parentTable=document.getElementById("parentTable");
	for(var r=0;r<parentTable.rows.length;r++){
		for(var i=0;i<parentTable.rows[r].cells.length;i++){
			var subTables=parentTable.rows[r].cells.getElementsByTagName("table");
			for(var j=0;j<subTables.length;j++){
				if(subTables[j].className!="dragTable")break;
				subTables[j].rows[0].className="dragTR";
				
				if (document.all) { //For IE
					subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
				}else{ //For Mozilla
					subTables[j].rows[0].addEventListener("onmousedown".substr(2,"onmousedown".length-2),Drag.dragStart,true);
				}
			}
		
			document.onmousemove=Drag.draging;
			document.onmouseup=Drag.dragEnd;
		}
	}
//end of Object Drag
}
}
Drag.inint();
</script>
</body>
</html>

    mozInnerHTML.js
    代码:
    HTMLElement.prototype.innerHTML setter = function (str) { 
	var	r = this.ownerDocument.createRange();
		r.selectNodeContents(this);
		r.deleteContents();
	var	df = r.createContextualFragment(str);
		this.appendChild(df);
		return str;
}  

HTMLElement.prototype.outerHTML setter = function (str) {

var	r = this.ownerDocument.createRange();
	r.setStartBefore(this);
var	df = r.createContextualFragment(str);
	this.parentNode.replaceChild(df, this);
	return str;
}

HTMLElement.prototype.innerHTML getter = function () { 
	return getInnerHTML(this);
}

function getInnerHTML(node) { 
	var str = "";
	for (var i=0; i<node.childNodes.length; i++)
		str += getOuterHTML(node.childNodes.item(i));
		return str;
}

HTMLElement.prototype.outerHTML getter = function () {
	return getOuterHTML(this);
}

function getOuterHTML(node) {
	var str = "";
	switch (node.nodeType) {
	  case 1: // ELEMENT_NODE
		str += "<" + node.nodeName;
		for (var i=0; i<node.attributes.length; i++) {
			if (node.attributes.item(i).nodeValue != null) {
				str += " ";
				str += node.attributes.item(i).nodeName;
				str += "=\"";
				str += node.attributes.item(i).nodeValue;
				str += "\"";
			}   
		}
		
		if (node.childNodes.length == 0 && leafElems[node.nodeName]){
			str += ">";
		}else { 
			str += ">"; 
			str += getInnerHTML(node);
			str += "<" + node.nodeName + ">";
		} 
		break;
	case 3: //TEXT_NODE
		str += node.nodeValue;
		break;     
	case 4: // CDATA_SECTION_NODE   
		str += "<![CDATA[" + node.nodeValue + "]]>";
		break;
	case 5:// ENTITY_REFERENCE_NODE
		str += "&" + node.nodeName + ";";
		break;
	case 8: // COMMENT_NODE   
		str += "<!--" + node.nodeValue + "-->"; 
		break; 
	} 
return str;
}

var _leafElems = ["IMG", "HR", "BR", "INPUT"];
var leafElems = {};
for (var i=0; i<_leafElems.length; i++){
	leafElems[_leafElems] = true;
}
     
    #3 帅气十足也, 2006-05-09
  4. 帅气十足也

    帅气十足也 Active Member

    注册:
    2006-03-09
    帖子:
    1,511
    赞:
    9
    第一个我给弄下来了..
    拖放演示.htm
    代码:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0029)http://www.pjhome.net/web/dd/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>拖放演示</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK 
media=screen href="拖放演示.files/style.css" type=text/css rel=stylesheet>
<SCRIPT src="拖放演示.files/DD.js" type=text/javascript></SCRIPT>

<SCRIPT src="拖放演示.files/yDD.js" type=text/javascript></SCRIPT>

<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<DIV id=MainBody>
<DIV id=Head>
<H4>拖放演示</H4></DIV>
<DIV id=tBody></DIV>
<DIV id=Footer>Power By PuterJam</DIV></DIV></BODY></HTML>
    拖放演示.files\DD.js
    代码:
    //=======================================================
// Drag Drop Code Made By PuterJam
//=======================================================
var DD=new Object()
DD.divCols={
 cols:[],
 isInit:false,
 Mod:function(){},
 addCol:function(e){},
 initCol:function(e){}
}

DD.divCols.clearCol=function(){
	DD.divCols.cols=[];	
}

DD.divCols.addCol=function(w){
	DD.divCols.cols.push(w);
}

DD.divCols.initCol=function(e){
	$("tBody").innerHTML=""
	for (i=0;i<DD.divCols.cols.length;i++){
		var tCol=document.createElement("DIV");
		tCol.id="col_" + i;
		tCol.className="divCol";
		tCol.style.width=DD.divCols.cols + "%"
		$("tBody").appendChild(tCol);
	}
	DD.divCols.isInit=true;
}



//------------------------------
DD.Mod=function(){
	var oM=this;
	var mouseX;
	var mouseY;
	var colArrayPos=new Array();
	this.col;
	this.Title="标题1";
	this.Content="内容1";
	this.Obj=null;
	this.inCol=null;
 
 	this.addMod=function(n){
		if (oM.Obj!=null) return;
		if (DD.divCols.isInit){
			n=n?n:1;
			if (n>DD.divCols.cols.length) n=1;
			var tmpModDiv=document.createElement("DIV");
			tmpModDiv.className="mod";
			
			oM.inCol = $("col_" + (n-1));
			oM.col="col_" + (n-1);
			if (oM.inCol.hasChildNodes()) {
					oM.inCol.insertBefore(tmpModDiv,oM.inCol.firstChild);
			}
			else
			{
					oM.inCol.appendChild(tmpModDiv);
			}
				
			oM.Obj=tmpModDiv;
			
			var tmpInDiv=document.createElement("DIV");
			tmpInDiv.className="innerMod";
			tmpModDiv.appendChild(tmpInDiv);

			var tmpHeadDiv=document.createElement("DIV");
			tmpHeadDiv.className="modHead";
			addEvent(tmpHeadDiv,"mousedown",oM.onStartDrag);
			tmpHeadDiv.innerHTML="<div class=\"modTitle\">"+oM.Title+"</div>";

			var tmpContentDiv=document.createElement("DIV");
			tmpContentDiv.className="modContent";
			tmpContentDiv.innerHTML=oM.Content;

			tmpInDiv.appendChild(tmpHeadDiv);
			tmpInDiv.appendChild(tmpContentDiv);
			
		}
	}
	
	this.onStartDrag=function(evt){
		var getPos;
		evt=getEvent(evt);
		oM.Obj.startDrag=true;
		colArrayPos=new Array();
		getPos= new findPos(oM.Obj)
			var tmpGhost=document.createElement("DIV");
			tmpGhost.className="modGhost";
			tmpGhost.id="modGhost";
			tmpGhost.name=oM.col;
			
			tmpGhost.style.height=parseFloat(getPos.height)-2 + "px";
		    oM.Obj.parentNode.insertBefore(tmpGhost, oM.Obj);
			
			oM.Obj.style.position = "absolute";
			oM.Obj.style.width=parseFloat(getPos.width) + "px";
			oM.Obj.style.top=parseFloat(getPos.top)-4 + "px";
			oM.Obj.style.left=parseFloat(getPos.left)-4 + "px";
			
	        mouseX = evt.clientX - parseInt(oM.Obj.style.left);
			mouseY = evt.clientY - parseInt(oM.Obj.style.top);
	    if (Browser.isIE) oM.Obj.filters.alpha.opacity=80; else oM.Obj.style.MozOpacity=0.8;
 
		if(document.body.setCapture)
			document.body.setCapture();
		else if(window.captureEvents)
			window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

		addEvent(document,"mousemove",oM.onDrag);
		addEvent(document,"mouseup",oM.endDrag);
		
		for (i=0;i<$("tBody").childNodes.length;i++) {
			colArrayPos = new findPos($("col_" + i));
		}
	}
	
	this.onDrag=function(evt){
		evt=getEvent(evt);
		var inCol
		var x=parseFloat(oM.Obj.style.left)
		var y=parseFloat(oM.Obj.style.top)
		for (i=0;i<colArrayPos.length;i++) {
			if ((x+parseFloat(oM.Obj.offsetWidth)/2)>=parseFloat(colArrayPos.left)) inCol=$("col_" + i);
		}
			var tmpGhost=document.createElement("DIV");
			tmpGhost.className=$("modGhost").className;
			tmpGhost.id=$("modGhost").id;
			tmpGhost.name=$("modGhost").name;
			tmpGhost.style.height=$("modGhost").style.height;
		
		
		if ($("modGhost").name!=inCol.id) {
				removeElement($("modGhost"));
				tmpGhost.name=inCol.id
				inCol.appendChild(tmpGhost);
		}
		
		var ghostPos=new findPos($("modGhost"))
		var colArr=getColArr(inCol)
	    var ghostIndex=getGhostIndex(colArr)
        
		if (ghostIndex!=0 && y<=parseFloat((new findPos(colArr[ghostIndex-1])).top)) {
				//moduleGhost.removeNode();
			removeElement($("modGhost"));
			inCol.insertBefore(tmpGhost, colArr[ghostIndex-1]);
		}
			
		if (ghostIndex!=(colArr.length-1) && y>=parseFloat((new findPos(colArr[ghostIndex+1])).top)) {
			removeElement($("modGhost"));
			if (colArr[ghostIndex+2]) {
				inCol.insertBefore(tmpGhost, colArr[ghostIndex+2]);
			} else {
				inCol.appendChild(tmpGhost);
			}
		}

		window.status=x + " - " + y + " - " + inCol.id + " - " + ghostIndex + " - " + ghostPos.top 
		
        oM.Obj.style.left = evt.clientX - mouseX + "px";
		oM.Obj.style.top = evt.clientY - mouseY + "px";
		return false
	}


	this.endDrag=function(evt){
		oM.Obj.startDrag=false;
		$("modGhost").parentNode.insertBefore(oM.Obj, $("modGhost"));
		removeElement($("modGhost"));
	    if (Browser.isIE) oM.Obj.filters.alpha.opacity=100; else oM.Obj.style.MozOpacity=1;
		oM.Obj.style.position = "static";
		oM.Obj.style.width= "auto";
		if(document.body.releaseCapture)
				document.body.releaseCapture();
			else if(window.releaseEvents)
				window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
		removeEvent(document,"mousemove",oM.onDrag);
		removeEvent(document,"mouseup",oM.endDrag);
	}
}
	





//=======================================================
function $(e){
	return document.getElementById(e)
}

function getColArr(col){
	var colArr = [];
	var len = col.childNodes.length;
	for (i=0; i<len; i++) {
		if (!col.childNodes.startDrag)  {
			colArr.push(col.childNodes);
		}
	}
	return colArr;
}

function getGhostIndex(colArr){
	var len = colArr.length;
	for (i=0; i<len; i++) {
		if (colArr==$("modGhost")) return i;
	}
}

function findPos(obj) {
	this.top=0;
	this.left=0;
	this.width=obj.offsetWidth;
	this.height=obj.offsetHeight;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			this.top += obj.offsetTop;
			this.left += obj.offsetLeft;
			obj = obj.offsetParent;
		}
	} 
}

function getEvent(evt){
	evt=evt?evt:(window.event?window.event:null);
	return evt
}

function addEvent(obj, evenTypeName, fn){
 if (obj.addEventListener){
    obj.addEventListener(evenTypeName, fn, true);
    return true;
 } else if (obj.attachEvent){
    return obj.attachEvent("on"+evenTypeName, fn);
 } else {
    return false;
 }
}

function removeEvent(obj, evenTypeName, fn){
  if (obj.removeEventListener){
    obj.removeEventListener(evenTypeName, fn, true);
    return true;
  } else if (obj.detachEvent){
    var r = obj.detachEvent("on"+evenTypeName, fn);
    return r;
  } else {
    alert("Error.");
  }
}

function removeElement(element){
	element.parentNode.removeChild(element);
}
var Browser = new Object();

Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined');
Browser.isIE = window.ActiveXObject ? true : false;
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
Browser.isSafari = (navigator.userAgent.toLowerCase().indexOf("safari")!=-1);
Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera")!=-1);

    拖放演示.files\style.css
    代码:
    BODY {
	FONT-SIZE: 12px; BACKGROUND: url(../img/b.png) #fff repeat-x; MARGIN: 0px; FONT-FAMILY: verdana
}
A:link {
	COLOR: #00368f
}
A:visited {
	COLOR: #00368f
}
A:hover {
	COLOR: #0051d7
}
#Head {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; TEXT-ALIGN: center
}
#Head H4 {
	FONT-SIZE: 18px; COLOR: #549b3f
}
#tBody {
	PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 530px
}
.divCol {
	FLOAT: left; PADDING-TOP: 1px
}
.mod {
	FILTER: Alpha(opacity=100); MARGIN: 6px; moz-opacity: 1
}
.innerMod {
	BORDER-RIGHT: #79a7e2 1px solid; BORDER-TOP: #79a7e2 1px solid; BORDER-LEFT: #79a7e2 1px solid; BORDER-BOTTOM: #79a7e2 1px solid; BACKGROUND-COLOR: #fff
}
.modHead {
	FONT-WEIGHT: bold; WIDTH: 100%; CURSOR: move; COLOR: #00368f; BACKGROUND-COLOR: #eff5ff; moz-user-select: none
}
.modTitle {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.modContent {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px
}
.modGhost {
	BORDER-RIGHT: #f00 1px dotted; BORDER-TOP: #f00 1px dotted; MARGIN: 6px; BORDER-LEFT: #f00 1px dotted; BORDER-BOTTOM: #f00 1px dotted
}
.layUL IMG {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
.layUL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: auto; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.layUL LI {
	FLOAT: left; MARGIN: 4px
}
.layUL A:link {
	PADDING-RIGHT: 2px; DISPLAY: block; PADDING-LEFT: 2px; BACKGROUND: #eff5ff; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
.layUL A:visited {
	PADDING-RIGHT: 2px; DISPLAY: block; PADDING-LEFT: 2px; BACKGROUND: #eff5ff; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
.layUL A:hover {
	BACKGROUND: #79a7e2
}
.layUL A.sel:link {
	BACKGROUND: #79a7e2
}
.layUL A.sel:visited {
	BACKGROUND: #79a7e2
}
.layUL A.sel:hover {
	BACKGROUND: #79a7e2
}
#Footer {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 11px; PADDING-BOTTOM: 3px; COLOR: #666; PADDING-TOP: 3px; TEXT-ALIGN: center
}
    拖放演示.files\yDD.js
    代码:
    function winInit(){
	DD.divCols.addCol(33);
	DD.divCols.addCol(33);
	DD.divCols.addCol(33);
	DD.divCols.initCol();

	var appMod1=new DD.Mod();
	appMod1.Title="这里是标题1"
	appMod1.Content="文本内容..."
	appMod1.addMod(2);
	
	var appMod2=new DD.Mod();
	appMod2.Title="联系我"
	appMod2.Content="My Site: <a href=\"http://www.pjhome.net\">http://www.pjhome.net</a><br/>My Mail: <a href=\"#\">[email protected]</a>"
	appMod2.addMod(3);
	
	var appMod3=new DD.Mod();
	appMod3.Title="这里是标题2"
	appMod3.Content="文本内容..."
	appMod3.addMod(1);

	var appMod4=new DD.Mod();
	appMod4.Title="这里是标题3"
	appMod4.Content="文本内容..."
	appMod4.addMod(2);

	var appMod5=new DD.Mod();
	appMod5.Title="GMail"
	appMod5.Content="Account not configured, use the Edit button to set your login and password"
	appMod5.addMod(1);

	var appMod6=new DD.Mod();
	appMod6.Title="图片夹"
	appMod6.Content="<div style=\"text-align:center;overflow:hidden;width:100%\"><img src=\"img/109633480_4ed7341744_m.jpg\" alt=\"\"/></div>"
	appMod6.addMod(3);


	var appMod7=new DD.Mod();
	appMod7.Title="布局"
	appMod7.Content="<ul id=\"layoutChooser\" class=\"layUL\">"
	appMod7.Content+="<li><a href=\"#\" onclick=\"chooseLayout(1,this)\"><img src=\"img/layout1.gif\" alt=\"Layout1\"/></a></li>"
	appMod7.Content+="<li><a href=\"#\" onclick=\"chooseLayout(2,this)\"><img src=\"img/layout2.gif\" alt=\"Layout2\"/></a></li>"
	appMod7.Content+="<li><a href=\"#\" onclick=\"chooseLayout(3,this)\"><img src=\"img/layout3.gif\" alt=\"Layout3\"/></a></li>"
	appMod7.Content+="<li><a href=\"#\" onclick=\"chooseLayout(4,this)\"><img src=\"img/layout4.gif\" alt=\"Layout4\"/></a></li>"
	appMod7.Content+="<li><a href=\"#\" onclick=\"chooseLayout(5,this)\"><img src=\"img/layout5.gif\" alt=\"Layout5\"/></a></li>"
	appMod7.Content+="<li><a href=\"#\" onclick=\"chooseLayout(6,this)\"><img src=\"img/layout6.gif\" alt=\"Layout6\"/></a></li>"
	appMod7.Content+="</ul><div style=\"clear:both;height:1px;overflow:hidden\"></div>"
	appMod7.addMod(1);

	var appMod8=new DD.Mod();
	appMod8.Title="记事本"
	appMod8.Content="This is your personalized page, you can now modify everything: move modules, add new RSS/ATOM feeds, change the parameters for each module, etc. Your modifications are saved in real-time and you'll find your page when you get back on Netvibes.com. If you want to be able to access your page from any computer, you can sign in (at the top right) with your email and a password."
	appMod8.addMod(2);
}

var defLayout=null
function chooseLayout(n,o){
	if (defLayout!=null) {
		defLayout.className="";
	}
	o.className="sel";
	defLayout=o;
	o.blur();
	layout(n)
}

function layout(n){
	if (!DD.divCols.isInit) {alert("程序初始化失败");return;}
	switch (n){
	 case 1:
	 	 layCount(2)
		 $("col_0").style.width="35%";
		 $("col_1").style.width="64%";
		 break;
	 case 2:
	 	 layCount(2)
		 $("col_0").style.width="64%";
		 $("col_1").style.width="35%";
		 break;
	 case 3:
	 	 layCount(2)
		 $("col_0").style.width="50%";
		 $("col_1").style.width="49%";
		 break;
	 case 4:
	 	 layCount(3)
		 $("col_0").style.width="25%";
		 $("col_1").style.width="49%";
		 $("col_2").style.width="25%";
		 break;
	 case 5:
	 	 layCount(3)
		 $("col_0").style.width="33%";
		 $("col_1").style.width="33%";
		 $("col_2").style.width="33%";
		 break;
	 case 6:
	 	 layCount(4)
		 $("col_0").style.width="25%";
		 $("col_1").style.width="25%";
		 $("col_2").style.width="25%";
		 $("col_3").style.width="24%";
		 break;
	}
}

function layCount(n){
	 	 while ($("tBody").childNodes.length>n){
	 	 	 	 moveMod($("tBody").childNodes.length-1,n-1)
		 }
		 while($("tBody").childNodes.length<n){
		 	var tCol=document.createElement("DIV");
			tCol.className="divCol";
			$("tBody").appendChild(tCol);
		 }
		 fixId();
}

function moveMod(col,incol){
	while ($("col_"+col).childNodes.length>0){
		$("col_"+incol).appendChild($("col_"+col).childNodes[0])
	}
	removeElement($("col_"+col));
}

function fixId(){
	for (i=0;i<$("tBody").childNodes.length;i++){
		$("tBody").childNodes.id="col_"+i
	}
}

addEvent(window,"load",winInit);
     
    #4 帅气十足也, 2006-05-09
  5. good8

    good8 New Member

    注册:
    2006-01-11
    帖子:
    86
    赞:
    0
    代码:
    效果不错!
     
    #5 good8, 2006-05-09
  6. swenge

    swenge New Member

    注册:
    2005-11-28
    帖子:
    386
    赞:
    1
    太强了！
     
    #6 swenge, 2006-05-09
  7. fen

    fen New Member

    注册:
    2005-12-18
    帖子:
    3,050
    赞:
    25
    确实不错啊!!
     
    #7 fen, 2006-05-11
  8. 帅气十足也

    帅气十足也 Active Member

    注册:
    2006-03-09
    帖子:
    1,511
    赞:
    9
    第一个的真正作者应该不是pjblog的作者吧

    他应该只是美化了下.
     
    #8 帅气十足也, 2006-05-12
  9. bedabe

    bedabe New Member

    注册:
    2006-05-07
    帖子:
    7
    赞:
    0
    真的好帅哦,蛮漂亮的
     
    #9 bedabe, 2006-05-13
  10. Function

    Function New Member

    注册:
    2006-03-24
    帖子:
    3,884
    赞:
    5
    #10 Function, 2007-04-11
  11. zmnet

    zmnet Well-Known Member

    注册:
    2006-05-03
    帖子:
    7,809
    赞:
    62
    看看
     
    #11 zmnet, 2007-04-16
  12. feeless

    feeless New Member

    注册:
    2007-02-27
    帖子:
    212
    赞:
    0
    N的得顶
     
    #12 feeless, 2007-04-16
(您必须注册并登陆后发新主题。)
Toggle Width
语言
简体中文