在网页中，如何做得自由拖动表格位置并保存表格的位置？

lbx972 2004-06-09 12:30:24

正在做一个个人主页的东东
如果做上这种就人性化多了！
我知道http://my.poco.cn
的首页就做到这样的效果，
请问那朋友有做这方面的经验，
给我们讲讲啦！

...全文

654 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

lbx972 2004-06-09

打赏
举报

lbx972 2004-06-09

打赏
举报

当然在DWMX下可以做到层的拖动，但是要达到http://my.poco.cn网站的层的拖动
而且可以达到自动吸付功能，而且可以保存自己的层的位置的功能，我想我们大家
还在要下一定的功夫的呀！

lbx972 2004-06-09

打赏
举报

再接上面的内容：

接上面的贴子：

/////////////////////////////////////////////////////////////////////////////////////
////// To expand and collapse the web part //////////////////////////////////////////

function fnShowHideContent(oEl,bCollapsed)
{
var oPart = fnGetPart( oEl );
var oTopBar = oPart.rows[0];
var oContent = oPart.rows[1];

var idName = oEl.parentElement.parentElement.parentElement.tagName;

var oTab1 = oPart.cells[0];
var oTab2 = oPart.cells[1];
var oTab3 = oPart.cells[2];
//var oSwapImg = oTab1.children[0];

if ( bCollapsed )
{

// -- if the table row is already collapsed, expand it & swap the images --
oContent.style.display = "inline";
//oEl.src = "images/chevronUp.gif";

oTab1.style.backgroundColor="";
oTab1.style.borderBottom='0px solid #144FA8';

oTab2.style.backgroundColor="";
oTab2.style.borderTop='0px solid #144FA8';
oTab2.style.borderBottom='0px solid #144FA8';
oTab2.parentElement.cells[1].children[0].style.backgroundColor= "";
oTab2.parentElement.cells[1].children[0].style.color = "#efefef"

oTab3.style.backgroundColor="";
oTab3.style.borderBottom='0px solid #144FA8';
oTab3.className = "clsPartRight";
oTab3.innerHTML="<nobr><font style='font-weight:bold'> 关闭 </font></nobr>";

//oSwapImg.src = "images/gripBlue.gif";
//----- writing back the state info to the array -------
var id = oEl.parentElement.parentElement.parentElement.parentElement.id;
oPart.state = "open";

}
else
{
// expand the table row & swapping the images
oContent.style.display = "none";
//oEl.src = "images/chevronDown.gif";

oTab1.style.backgroundColor="";
oTab1.style.borderBottom='2px solid #1650A7';

oTab2.style.backgroundColor="";
oTab2.style.borderTop='0px solid #1650A7';
oTab2.style.borderBottom='2px solid #1650A7';
oTab2.parentElement.cells[1].children[0].style.backgroundColor= "";
oTab2.parentElement.cells[1].children[0].style.color = "#cccccc"

oTab3.style.backgroundColor="";
oTab3.style.borderBottom='2px solid #1650A7';
oTab3.className = "clsPartRightHidden";
oTab3.innerHTML="<nobr><font style='font-weight:bold'> 打开 </font></nobr>";

//oSwapImg.src = "images/gripGray.gif";
oPart.state = "close";

}

fnSaveState();

}

///////////////////////////////////////////////////////////////////////////////////
//////// function to cancel the dragstart event ///////////////////////////////////
function fnCancel()
{
if( event.srcElement.className == "clsPartHead" )
{
window.event.returnValue = false;
}
}

//////////////////////////////////////////////////////////////////////////////////////
//////// To save the order and state of web parts ////////////////////////////////////
function fnSaveState()
{
var oUserData = window.document.all["oLayout"];
var sUserData = "";
var sState = "";
var s0="";
var s1="";

for (i=0;i<element.parts.length;i++)
{
sState = "undefined" == String( element.parts[i].state ) ? "open" : element.parts[i].state;
sUserData += (element.parts[i].id + "=" + sState + ";");

if(element.parts[i].offsetLeft<10)
s0+=element.parts[i].id+"|"+element.parts[i].h+",";
else
s1+=element.parts[i].id+"|"+element.parts[i].h+",";
if(top.document.all.layouts){
top.document.all.layouts.value=s0+":"+s1;
}

}

oUserData.setAttribute("userdata",sUserData);
oUserData.save(sContentID);
//alert(s0+"|"+s1);
}

////////////////////////////////////////////////////////////////////////////////////////
///////// function to check the state and release the element ////////////////
///////// if a mouse button is not depressed ////////////////

function fnCheckState()
{
if( event.button != 1 ) fnRelease();
}

///////////////////////////////////////////////////////////////////////////////
///////// function to return false ////////////////////////////////////////////
function fnSelect()
{
return false;
}

</SCRIPT>
</PUBLIC:COMPONENT>

yourbest 2004-06-09

打赏
举报

标记一下

会织网的蚂蚁 2004-06-09

打赏
举报

我想这个在DREAMWAVER就可以实现吧。首先做一个层，然后定义这个层的鼠标事件。鼠标移到上面是什么事件onmouseover，拖动什么事件(这个你再看看吧，我也不太明白)，离开什么事件onmouseout。你见过QQ的网络家园吗。好像也是这个道理。

lbx972 2004-06-09

打赏
举报

接上面的贴子的：

//////////////////////////////////////////////////////////////////////////////////////
////// on mouse up, detach the events and reposition the webparts ////////////////////

function fnRelease()
{

var oEl = event.srcElement;

fnSaveState();

window.document.detachEvent( "onmousemove" , fnMove );
window.document.detachEvent( "onscroll" , fnMove );
window.document.detachEvent( "onmousemove" , fnCheckState );
window.document.detachEvent( "onmouseup" , fnRelease );
window.document.detachEvent( "onselectstart", fnSelect );

if(oEl.offsetLeft>=380)
otd=element.rows(0).cells(1);
else
otd=element.rows(0).cells(0);

if( "object" == typeof(element.current) );
{

if (null != element.current )
{

fnSetPosition( element.dragwindow );
element.current = null;
fnHideDragWindow();
}
else
{
return false;
}

}

}

////////////////////////////////////////////////////////////////////////////////////////
/////// function to reorder the webparts after dragging ////////////////////////////////
function fnSetPosition( oEl )
{
var oPrevEl = fnGetPrevEl( oEl );

if( null != oPrevEl )
{
if(otd.innerHTML.toUpperCase()!="<DIV CLASS=STOREUSERDATA ID=OLAYOUT></DIV>")
oPrevEl.insertAdjacentElement( "afterEnd" , element.current );
else
otd.insertAdjacentElement( "afterBegin" , element.current );

}
else
{
otd.insertAdjacentElement( "afterBegin" , element.current );
}
element.parts = fnGetPartArray();
fnSaveState();
}

function fnGetPrevEl( oEl )
{
var oReturn = null;
for( var i = 0; i < element.parts.length; i++ )
{
if( element.parts[i].offsetTop < oEl.offsetTop &&
element.parts[i].offsetLeft < oEl.offsetLeft
) oReturn = element.parts[i];
}
return oReturn;
}

//////////////////////////////////////////////////////////////////////////////
//////// function to strip out non-alpha numeric chars from input string /////

function fnFormatFileName(sFileName)
{
if( "string" == typeof( sFileName ) )
{
sFileName = sFileName.replace( /[\W]/gi , "" );
return sFileName;
}
}

//////////////////////////////////////////////////////////////////////////////
//////// This is a innerloop for function fnCheckWebPartIDs //////////////////

function fnInternalLoop(i,strElements)
{
for(j=0;j<strElements.length;j++)
{
if ( parentElement.children[i].id == strElements[j].split("=")[0] )
{
bUserData = true;
return;
}
else
{
bUserData = false;
}
}
}

//////////////////////////////////////////////////////////////////////////////
////// function to get user data content /////////////////////////////////////
function fnGetUserDataList()
{

var oUserData = window.document.all("oLayout");
var oReturn = null;
try
{
oUserData.load(sContentID);
}
catch(e)
{
oUserData = null;
}

if (null != oUserData && oUserData != "" && "undefined" != oUserData )
{
var sUserData = oUserData.getAttribute( "userdata" );
if( null != sUserData )
{
oReturn = fnParseUserData( oUserData.getAttribute( "userdata" ) );
}
}
return oReturn;

}

function fnParseUserData( sUserData )
{
var oTmpArray = sUserData.split( ";" );
var oReturnArray = new Array( oTmpArray.length - 1 );
for( var i = 0; i < oTmpArray.length -1; i++ )
{
oReturnArray[i] = oTmpArray[i].split( "=" );
}
return oReturnArray;
}

内容过长，下面的贴子也是的！

lbx972 2004-06-09

打赏
举报

http://my.poco.cn首页的HTC文件：

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="fnInit()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="fnGrab()" />
<PUBLIC:ATTACH EVENT="ondragstart" ONEVENT="fnCancel()" />

<SCRIPT LANGUAGE="JScript">

window.onerror = function fnNoOp() {return true; };

// globals
var m_iSpacingTop = 10;
var m_iSpaceBetween = 5;
var m_iTop = 15;
var bUserData = false;
var bVisited = false;
var winLeft,winTop;
var otd;

//---- Setting the id for user data store ---------

/*
if ("undefined" == typeof(sContentID) || sContentID == "" )
{
sContentID = fnFormatFileName(window.location.href) ;
}
else
{
sContentID = sContentID;
}
*/

sContentID = "pocobox";

//////////////////////////////////////////////////////////////////////////////
////// Initializing the top and height values for the parts //////////////////
function fnInit()
{
var oStateArray = fnGetUserDataList();
element.parts = fnGetPartArray();
var oDragWindow = window.document.createElement( "SPAN" );
oDragWindow.className = "clsDragWindow";
element.dragwindow = oDragWindow;
element.rows(0).cells(0).insertAdjacentElement( "beforeEnd" , oDragWindow );
//////ken
//fnReOrder( oStateArray );

}

function fnReOrder( oStateArray )
{
if( null == oStateArray ) return;
var bDirty = false;
var oLastPart = null;

for( var i = 0; i < oStateArray.length; i++ )
{
if( bDirty || element.parts[i].id != oStateArray[i][0] )
{
bDirty = true;
var oPart = fnGetPartById( oStateArray[i][0] );
if( i != 0 ) oLastPart = element.parts[i-1];
if( null != oLastPart )
{
oLastPart.insertAdjacentElement( "afterEnd" , oPart );

}
else
{
element.rows(0).cells(0).insertAdjacentElement( "afterBegin" , oPart );
}
oLastPart = oPart;
}
if( !bDirty )
{
try{bClosed = ( oStateArray[i][1] == "close" );}
catch(e){bClosed = false;}
element.parts[i].state = bClosed ? "close" : "open";
if( bClosed ) fnShowHideContent( element.parts[i] , !bClosed );
}
}
if( bDirty )
{
element.parts = fnGetPartArray();
for( var i = 0; i < element.parts.length; i++ )
{
try{bClosed = oStateArray[i][1] == "close"}
catch(e){bClosed = false;}
element.parts[i].state = bClosed ? "close" : "open";
if( bClosed ) fnShowHideContent( element.parts[i] , !bClosed );
}
}
}

function fnGetPartById( sId )
{
return element.all( sId );
}

function fnGetPartArray()
{
var oParts = element.all.tags( "TABLE" );
var oReturn = new Array();
for( var i = 0; i < oParts.length; i++ )
{
if( oParts[i].className == "clsPart" )
{
oReturn[oReturn.length] = oParts[i];
}
}
return oReturn;
}

function fnGetMinMaxImg( oPart )
{
var oImgs = oPart.all.tags( "img" );
for( var i = 0; i < oImgs.length; i++ )
{
if( oImgs[i].className == "clsMinimize" ) return oImgs[i];
}
}

/////////////////////////////////////////////////////////////////////////////////////
/////// On mouse down grab the element and capture its ondrag event /////////////////

function fnGrab()
{
var oEl = event.srcElement;

while( null != oEl && oEl.tagName.toUpperCase() != "TD" )
{
oEl = oEl.parentElement;
}
var bCollapsed

if( oEl.className== "clsPartRight" )
{
oTable1=oEl;
while( null != oTable1 && oTable1.className!= "clsPart" )
{
oTable1 = oTable1.parentElement;
}
var oTableRow2 = oTable1.rows[1];
oTableRow2.style.display=( (oTableRow2.style.display == "none") ? 'block' : 'none');
oEl.innerHTML=( (oTableRow2.style.display == "none") ? "<nobr><font style='font-weight:bold'> 打开 </font></nobr>" : "<nobr><font style='font-weight:bold'> 关闭 </font></nobr>");
oTable1.h=( (oTableRow2.style.display == "none") ? '0' : '1');
fnSaveState();

// var bCollapsed = ( (oTableRow2.style.display == "none") ? true : false);

//fnShowHideContent(oEl,bCollapsed);

}
else if( oEl.className == "clsPartHead")
{

if("img" == oEl.tagName.toLowerCase())
{
oEl.onDragStart = fnCancel;
oEl = oEl.parentElement;
}

m_iTop = event.clientY;
oEl = fnGetPart( oEl );
element.offsetY = event.offsetY + element.offsetTop;
element.offsetX = event.offsetX + element.offsetLeft + 15;
element.current = oEl;
winLeft=event.x-event.offsetX;

var tel = event.srcElement;

while( null != tel && tel.tagName.toUpperCase() != "TD" )
{
tel = tel.parentElement;
}

winTop=tel.offsetLeft;

fnShowDragWindow( oEl ,winLeft,winTop);

window.document.attachEvent( "onmousemove" , fnMove );
window.document.attachEvent( "onscroll" , fnMove );
window.document.attachEvent( "onmousemove" , fnCheckState );
window.document.attachEvent( "onmouseup" , fnRelease );
window.document.attachEvent( "onselectstart", fnSelect );

}

}

function fnShowDragWindow( oEl,winLeft )
{

element.dragwindow.style.height = oEl.offsetHeight - 4;
element.dragwindow.style.left = winLeft-winTop;
element.dragwindow.style.top = oEl.offsetTop + 1;
element.dragwindow.style.width = oEl.offsetWidth-4;
element.dragwindow.zIndex = 100;
element.dragwindow.style.display = "block";
}

function fnHideDragWindow()
{
element.dragwindow.style.display = "none";
element.dragwindow.style.height = "";
element.dragwindow.style.top = "";
element.dragwindow.style.left = "";
element.dragwindow.style.width = "";
element.dragwindow.zIndex = "";
}

function fnGetPart( oEl )
{
while( null != oEl && oEl.className != "clsPart" )
{
oEl = oEl.parentElement;
}
return oEl;
}

////////////////////////////////////////////////////////////////////////////////
///////// function to set the top style for the object /////////////////////////
function fnMove()
{
if (event.button != 1)
{
fnRelease();
return;
}

element.dragwindow.style.top = event.clientY - element.offsetY + window.document.body.scrollTop-1;
element.dragwindow.style.left = event.clientX - element.offsetX + window.document.body.scrollLeft+13-winTop;
if (event.clientY > window.document.body.clientHeight - 10 )
{
window.scrollBy(0, 10);
}
else if (event.clientY < 10)
{
window.scrollBy(event.clientX, -10);
}

}

内容过长，接着的贴子内容也是的！

lbx972 2004-06-09

打赏
举报

谢谢楼上的，拖动功能可以实现了！
呵呵！
但是我要做到http://my.poco.cn这个首页面的
功能，我觉得现在这效果距离那种功能还有一段距离，
可以一起想办法来解决吗？
他的功能如：1、表格拖动后，他会连带影响其它表格的排版，好像winamp的那些窗口，
2、表格排好后，还可以把表格的位置记录到数据库，我也不会做！
我提供首页的htc文件！

yslcuk 2004-06-09

打赏
举报

这是自由拖动的导航条，你参考下！！！
要完成此效果需要三个步骤

第一步：把如下代码加入到<head>区域中

<SCRIPT LANGUAGE="JavaScript">

</script>

第二步：把如下代码加入到<body>区域中

<br>
<div id="object1" style="position:absolute; visibility:show; left:50px; top:50px; z-index:2">
<table border=1 cellpadding=5 width="139">
<tr>
<td bgcolor=eeeeee height="30"><a href="javascript:void(0)" onmousedown="setObject(1)"><font size="2" color="#000000">单击移动双击放下</font></a>　　</td>
</tr>
<tr>
<td>
<br>
<A HREF="link.htm">菜单类目一</A><br>
<A HREF="link.htm">菜单类目二</a><br>
<A HREF="link.htm">菜单类目三</a> </td>
</tr>
</table>
</div>

<div id="object11" style="position:absolute; visibility:show; left:-70px; top:-70px; z-index:2">
</div>

第三步：把“OnLoad="checkVersion4()"”加在<body>标记里
例如：<body OnLoad="checkVersion4()">