哪位高手可以实现类似"谷歌个性化首页"那样的功能?

Question

效果
http://www.google.cn/ig/china主要是实现随意拖放DIV以改变布局
最好用JQuery实现

Answer 1

Jquery出了个插件，
http://dev.iceburg.net/jquery/jqDnR/
你可以好好看看

Answer 2

jQuery UI官网的http://jqueryui.com/demos/sortable/#portlets

Answer 3

我做了一个，前台用的是table布局，加cookie做的，不过不如用extjs
方便。
给你一下我的前台代码：<script language="javascript" type="text/javascript">
//----設置Cookie------function setCookie(name,value,domain)
{
var value = escape(value);
var nameString = "Drag_"+name + "=" + value; //給cookie変量增加前綴
var extime = new Date(); 
extime.setTime (extime.getTime () + 315360000);//cooikeの生命の周期を設ける
var expiryString = ";expires=" + extime.toGMTString();
var domainString = "";//訪問のホストコンピュータを設ける
var pathString = ";path=/";//設けてパスを訪問する 
var setvalue = nameString + expiryString;
document.cookie = setvalue;
}//----設置Cookie結束------
//---読取Cookie-------function getcookie (name) 
{
var CookieFound = false;
var start = 0;
var end = 0;
var CookieString = document.cookie;
var i = 0;
name="Drag_"+name; //增加前綴
while (i <= CookieString.length) 
{
start = i ;
end = start + name.length;
if (CookieString.substring(start, end) == name)
{
CookieFound = true;
break; 
}
i++;
} if (CookieFound)
{
start = end + 1;
end = CookieString.indexOf(";",start);
if (end < start)
end = CookieString.length;
var getvalue = CookieString.substring(start, end);
return unescape(getvalue);
}
return "";
}//---読取Cookie結束-------//檢測是否禁用了cookie
function isEnableCookie() 
{ 
try {
var cookie_helper = new CookieHelper("");
var test_cookie_name = "test_cookie_name";
var test_cookie_value = "test_cookie_value";
var test_cookie_value_ret = "";
cookie_helper.writeCookie(test_cookie_name,test_cookie_value);
test_cookie_value_ret = cookie_helper.getCookieValue(test_cookie_name);
if ( test_cookie_value_ret != null ) 
{
cookie_helper.removeCookie(test_cookie_name);
return true;
} 
else 
{ 
return false;
} 
} 
catch (error) 
{ 
return false;
}
}
</script>

<script language="javascript" defer>
/**********************************************************************************************************************************/
var draged=false;
tdiv=null;
function dragStart(){
ao=event.srcElement; //設置或huo取触発事件的対象,zhe里是可以移動的table対象的TD対象
if((ao.tagName=="TD")||(ao.tagName=="TR"))
ao=ao.offsetParent;//huo取定義対象offsetTop和offsetLeft属性的容器対象的引用,zhe里是huo取的被移動的table対象。
else 
return;
draged=true;
tdiv=document.createElement("div");
tdiv.innerHTML=ao.outerHTML;
tdiv.style.display="block";
tdiv.style.position="absolute";
tdiv.style.filter="alpha(opacity=70)";
tdiv.style.cursor="move";
tdiv.style.width=ao.offsetWidth;//被移動的table対象的高度
tdiv.style.height=ao.offsetHeight;
tdiv.style.top=getInfo(ao).top;
tdiv.style.left=getInfo(ao).left;
document.body.appendChild(tdiv);
lastX=event.clientX;
lastY=event.clientY;
lastLeft=tdiv.style.left;
lastTop=tdiv.style.top;
try{ao.dragDrop(); //初始化tuo曳事件
}catch(e)
{}
}
function draging(){//重要:判断MOUSE的位置
if(!draged)return;
var tX=event.clientX;
var tY=event.clientY;
tdiv.style.left=parseInt(lastLeft)+tX-lastX;//
tdiv.style.top=parseInt(lastTop)+tY-lastY;
for(var i=0;i<parentTable.cells.length;i++){//for1
var parentCell=getInfo(parentTable.cells[i]);
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom)//判断鼠標的位置是否移動到父表的某个列中
{//if1
var subTables=parentTable.cells[i].getElementsByTagName("table");
if(subTables.length==0)//如果鼠標所在的列中没有没有子表，直接增加子対象（table）
{
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom)
{parentTable.cells[i].appendChild(ao);}
break;
}
for(var j=0;j<subTables.length;j++)//列中存在子表的処理
{
var subTable=getInfo(subTables[j]);
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom)
{
parentTable.cells[i].insertBefore(ao,subTables[j]);
break;
}else{
parentTable.cells[i].appendChild(ao);
} 
}
}//if1
}//for1
}
function dragEnd(){
if(!draged)return;
draged=false;
//---save sub table position---
var pttyle="";
for(var i=0;i<parentTable.cells.length;i++){//for1
var subTables=parentTable.cells[i].getElementsByTagName("table");if(subTables.length==0)
{
pttyle+="|";
break;
}else{
for(var j=0;j<subTables.length;j++)//列中存在子表的処理
{
if(subTables[j].className!="dragTable") continue; //zhe里只対className==dragTable的表処理，排除組織頁面中使用的table
pttyle+=subTables[j].id+","+subTables[j].rows[0].cells[0].innerText+":";
}
pttyle+="|";
}
}//for1
setCookie("pttyle",pttyle,"");
//---save sub table position end---
mm=ff(150,15);//
}
function getInfo(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;
}
function ff(aa,ab){//用于恢複位置，来自GOOGLE网站；aa/ab其値越大恢複的速度越快
var ac=parseInt(getInfo(tdiv).left);
var ad=parseInt(getInfo(tdiv).top);
var ae=(ac-getInfo(ao).left)/ab;
var af=(ad-getInfo(ao).top)/ab;
return setInterval(function(){if(ab<1){
clearInterval(mm);
tdiv.removeNode(true);
ao=null;
return
}
ab--;
ac-=ae;
ad-=af;
tdiv.style.left=parseInt(ac)+"px";
tdiv.style.top=parseInt(ad)+"px"
}
,aa/ab)
}
function inint(){//初始化
/*根据cookie組織父表*/
var pttyle=getcookie("pttyle");
//debugger;
if (pttyle.length>0){
//*****huo得父表中所有的子表対象***/
var ctCount=0; //計数器
var stObjects=new Array();//保存子表対象
//debugger;
for(var i=0;i<parentTable.cells.length;i++){
var subTables=parentTable.cells[i].getElementsByTagName("table");//huo得子表 
for(var j=0;j<subTables.length;j++){ 
stObjects[ctCount]=subTables[j];
ctCount++; 
parentTable.cells[i].removeChild(subTables[j]); //刪除列中的子表対象
}
}//huo取cookie中子表対象id
var tempCells=pttyle.split("|");//因為格式為pttyle=stid,stt:stid,stt:|stid,stt:stid,stt:|//begin for2
for(var i=0; i<tempCells.length-1;i++)//拆成数組時存在一个多余的元素，故循環減去1
{
var tempSTs=tempCells[i].split(":"); 
for (var j=0;j<tempSTs.length-1;j++)//遍歴子表信息,
{ 
for(var n=0;n<stObjects.length;n++)//从子表対象数組中査詢子表対象
{
if(tempSTs[j].indexOf(stObjects[n].id)!=-1)//id値存在
{
parentTable.cells[i].appendChild(stObjects[n]);break;
} 
}
}
}//end for2 
}//pttyle.length>0 End/*根据cookie組織父表結束*//*設置tuo曳的様式和事件*/
for(var i=0;i<parentTable.cells.length;i++){
var subTables=parentTable.cells[i].getElementsByTagName("table");//huo得子表
for(var j=0;j<subTables.length;j++){
if(subTables[j].className!="dragTable") continue;
subTables[j].rows[0].className="dragTR";//給行添加表示可以移動的様式
subTables[j].rows[0].attachEvent("onmousedown",dragStart);//将指定函数邦定到事件，以便毎当該事件在対象上触発時都調用該函数
subTables[j].attachEvent("ondrag",draging);//将draging函数邦定到進行tuo曳操作時，在源対象上持続触発的事件。
subTables[j].attachEvent("ondragend",dragEnd);//ondragend事件：当用戸在tuo曳操作結束后釈放鼠標時在源対象上触発。
}
} 
/*設置tuo曳的様式和事件結束*/
}
//inint();
/*****************************************link_database******************************************/
function load()
{
var basedata=keti_3.drog2.data().value;
var table1=document.getElementById("basictable");
    table1.childNodes[0].childNodes[0].childNodes[1].innerText=basedata.Tables[0].Rows[0].name;
table1.childNodes[0].childNodes[1].childNodes[1].innerText=basedata.Tables[0].Rows[1].name;
table1.childNodes[0].childNodes[2].childNodes[1].innerText=basedata.Tables[0].Rows[2].name;
table1.childNodes[0].childNodes[3].childNodes[1].innerText=basedata.Tables[0].Rows[3].name;
table1.childNodes[0].childNodes[4].childNodes[1].innerText=basedata.Tables[0].Rows[4].name.toString().substring(0,11)+"...";
table1.childNodes[0].childNodes[5].childNodes[1].innerText=basedata.Tables[0].Rows[5].name;
table1.childNodes[0].childNodes[6].childNodes[1].innerText=basedata.Tables[0].Rows[6].name;
table1.childNodes[0].childNodes[7].childNodes[1].innerText=basedata.Tables[0].Rows[7].name;
table1.childNodes[0].childNodes[8].childNodes[1].innerText=basedata.Tables[0].Rows[8].name;
table1.childNodes[0].childNodes[9].childNodes[1].innerText=basedata.Tables[0].Rows[9].name;
table1.childNodes[0].childNodes[10].childNodes[1].innerText=basedata.Tables[0].Rows[10].name;

}
function change()
{
var textcontent=document.getElementById("pingyuTextBox").value;
keti_3.drog2.update(textcontent);
}
function text_setread()
{
//debugger
document.getElementById("pingyuTextBox").readOnly=false;//文書の枠を設けて書くことができる

}
function openwin()
 {
    //debugger;
 　　window.open('pic.aspx','newwindow','height=330,width=350,top=15,left=65,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
  
 }   

</script>

Answer 4

下面是用table布局</HEAD>
<body MS_POSITIONING="GridLayout" onload=load(); >
<form id="Form1" method="post" runat="server">
<FONT face="MS UI Gothic">
<table border="2" cellpadding="0" cellspacing="10" width="798" height="800" id="parentTable">
<tr>
<td width="330" height="220" valign="top">
<table id="st1" border="1" class="dragTable" cellspacing="0">
<tr>
<td>写真</td>
</tr>
<tr>
<td><a onclick=openwin();><img src="login2.jpg" width="325" height="220" align="middle"></a></td>
</tr>
</table>
<table style="DISPLAY:none" class="dragTable">
<tr>
<td></td>
</tr>
</table>
<table id="st2" border="1" class="dragTable" cellspacing="0">
<tr>
<td>基本情報</td>
</tr>
<tr>
<td>
<table id="basictable" border="2" bordercolor="#89b7ee">
<tr>
<td class="td_hw" width="120" style="HEIGHT: 20px">商品コード</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">商品コード名</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">規格(カラー)</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">ブランド(サイズ)</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">仕入担当者</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">商品</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">デイビジュン</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">ライン</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">部門</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">ミニ部門</td>
<td width="195"></td>
</tr>
<tr>
<td class="td_hw" width="120">品種</td>
<td width="195"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="330" height="220">
<table id="st3" border="1" class="dragTable" cellspacing="0">
<tr>
<td>コメント</td>
</tr>
<tr>
<td>
<asp:textbox id="pingyuTextBox" Runat="server" Width="330px" Height="330px" ReadOnly="True" TextMode="MultiLine"></asp:textbox>
</td>
</tr>
</table>
</tr>
</table>
<script language=javascript type=text/javascript>inint();</script>
</FONT>
</form>
</body>
</HTML>

Answer 5

感谢knifewei的共享。
不过我已找到两个较好的解决方案：
一、微软WebParts
二、dropthings(http://dropthings.omaralzabir.com/?First_Page)现在正在考虑用哪个solution
不知大家有何见解？

Answer 6

muxrwc 不是很早就写了个么....
http://muxrwc.01www.cn/wc/cdrag.htm 传说兼容所有浏览器来着

Answer 7

这个solution不错，纯js，还支持FF，不像WebParts只支持IE。
不过大量的纯js对升级扩展比较困难