关于js splitter效果的问题

wj081066 2010-04-22 03:35:05

我的页面分左右栏，中间有一个分隔条，可以拖动它来改变左右栏目的宽度。
问题是：拖动时左边的菜单会全部显示，但是拖动条把右边的部分内容也移到了左边，即拖动条移到了内容之上。、

请js高手帮看一下。分数会给解决的问题的高手。

我把代码放上：
前台页面：

<table width="100%">

						<tr width="100%" height="700" valign="top">

							<td width="180"><OA:jstree2 id="tv" style="BEHAVIOR:url(/hbwebapp/webcontrols/jstree3.htc);OVERFLOW:auto;WIDTH:100%;HEIGHT:100%"

									onNodeSelected="tvNodeSelected();"></OA:jstree2></td>

								

							<td id="splitterContainer"></td>

							<td id="innerDocTD">

								<iframe id='frmContainer' style="WIDTH: 100%; HEIGHT: 100%" frameborder='0' scrolling='auto'>

								</iframe>

							</td>

						</tr>

					</table>

js脚本：



var m_oStartOrg = null;

	var m_nLeftMargin = 30;

	var m_nRightMargin = 80;

	var m_splitter = null;



	function onSplitterMouseOver()

	{

		var obj = event.srcElement;



		if (obj.tagName == "DIV")

			obj.className = "activeElement";

	}



	function onSplitterMouseOut()

	{

		var obj = event.srcElement;



		if (obj.tagName == "DIV")

			obj.className = "";

	}



	function onSplitterMove()

	{

		if (event.button == 1)

		{

			if (m_oStartOrg == null)

			{

				var obj = event.srcElement;



				m_oStartOrg = new Object();



				m_oStartOrg.srcElement = obj;

				m_oStartOrg.xOffset = event.x - obj.style.pixelLeft;

				m_oStartOrg.yOffset = event.y - obj.style.pixelTop;

				m_oStartOrg.xLast = event.x;

				m_oStartOrg.yLast = event.y;



				obj.setCapture();

			}

			else

			{

				var obj = m_oStartOrg.srcElement;



				var nLeft = event.x - m_oStartOrg.xOffset;



				var oTD = obj.container;

				var oPrev = oTD.previousSibling;



				if (oPrev)

				{						

					if (nLeft <= m_nLeftMargin)

						nLeft = m_nLeftMargin;

					else

					if (nLeft > document.body.offsetWidth - m_nRightMargin)

						nLeft = document.body.offsetWidth - m_nRightMargin;



					obj.style.pixelLeft = nLeft;



					var nDelta = nLeft - (m_oStartOrg.xLast - m_oStartOrg.xOffset);



					if (oPrev.style.pixelWidth + nDelta > 0)

						oPrev.style.pixelWidth += nDelta;

				}

				m_oStartOrg.xLast = nLeft + m_oStartOrg.xOffset;

				m_oStartOrg.yLast = event.y;

			}

		}

	}



	function onSplitterUp()

	{

		var obj = event.srcElement;



		if (m_oStartOrg)

		{

			m_oStartOrg.srcElement.releaseCapture();

			m_oStartOrg = null;

		}

	}



	function onWindowResize()

	{

		initSplitter(splitterContainer);

	}



	function initSplitter(container)

	{

		if (!m_splitter)

		{

			m_splitter = document.createElement('<div style="DISPLAY:NONE;BORDER-RIGHT: #6BA1DE 1px solid;BORDER-LEFT: #6BA1DE 1px solid; CURSOR: w-resize; POSITION: absolute; HEIGHT: 0%"></div>');



			document.body.insertAdjacentElement("afterBegin", m_splitter);

			m_splitter.style.width = "4px";

		}



		with(container)

		{

			m_splitter.style.left = absLeft(container);

			m_splitter.style.top = absTop(container);

			m_splitter.style.height = container.offsetHeight;

			m_splitter.style.display = "inline";

			m_splitter.container = container;



			m_splitter.onmousemove = onSplitterMove;

			m_splitter.onmouseup = onSplitterUp;

			m_splitter.onmouseover = onSplitterMouseOver;

			m_splitter.onmouseout = onSplitterMouseOut;

		}

	}