用js实现的模拟可拖动可缩放的窗口

      工作中有这样一个需求，一个页面上需要有一个或多个浮动窗口，浮动窗口可以拖动，可以改变大小。分析需求后决定用div模拟这样的浮动窗口，用js和xslt结合实现了对浮动窗口的创建和拖动缩放功能。主要源代码如下：

1.floatDiv.xslt

     <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:template match="/"> <xsl:for-each select="/root/win"> <div> <xsl:attribute name="id"><xsl:value-of select="outerdiv/id"/></xsl:attribute> <xsl:attribute name="title"><xsl:value-of select="outerdiv/title"/></xsl:attribute> <xsl:attribute name="style">height:<xsl:value-of select="outerdiv/height"/>px;width:<xsl:value-of select="outerdiv/width"/>px;left:<xsl:value-of select="outerdiv/left"/>px;top:<xsl:value-of select="outerdiv/top"/>px;z-index:<xsl:value-of select="outerdiv/z-index"/>;position:absolute;</xsl:attribute> <xsl:if test="outerdiv/dragable = 1"> <div align="center" style="font-size:2px;cursor:point;top:0px;left:0px;height:20px;width:100%;background:url(images/titlebar.gif);position:absolute;"> <xsl:attribute name="onMouseDown">javascript:<xsl:value-of select="/root/fun_id"/>.startDrag(this,event);</xsl:attribute> <xsl:attribute name="onMouseMove">javascript:<xsl:value-of select="/root/fun_id"/>.dragDiv(event);</xsl:attribute> <xsl:attribute name="onMouseUp">javascript:<xsl:value-of select="/root/fun_id"/>.stopDrag(this,event);</xsl:attribute> <span style="width:30%;left:2px;top:2px;font-size:12px;font-weight:bold;position:absolute;white-space:nowrap;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;text-align:left;"><xsl:value-of select="outerdiv/title"/></span> <img src="images/arrowDown_over.png" mce_src="images/arrowDown_over.png" style="cursor:point;width:15px;height:15px;"> <xsl:attribute name="onclick">javascript:<xsl:value-of select="/root/fun_id"/>.expandToLeftBottom(this);</xsl:attribute> </img> <img src="images/arrowUp_over.png" mce_src="images/arrowUp_over.png" style="cursor:point;width:15px;height:15px;"> <xsl:attribute name="onclick">javascript:<xsl:value-of select="/root/fun_id"/>.expandToTopRight(this);</xsl:attribute> </img> <img src="images/iconMinPage.gif" mce_src="images/iconMinPage.gif" style="cursor:point;right:40px;position:absolute;width:15px;height:15px;"> <xsl:attribute name="id"><xsl:value-of select="outerdiv/id"/>_minImg</xsl:attribute> <xsl:attribute name="onclick">javascript:<xsl:value-of select="/root/fun_id"/>.minWin(this);</xsl:attribute> </img> <img src="images/iconMaxPage.gif" mce_src="images/iconMaxPage.gif" style="cursor:point;right:20px;position:absolute;width:15px;height:15px;"> <xsl:attribute name="id"><xsl:value-of select="outerdiv/id"/>_revertImg</xsl:attribute> <xsl:attribute name="onclick">javascript:<xsl:value-of select="/root/fun_id"/>.revertWin(this);</xsl:attribute> </img> <img src="images/iconMaxPage.gif" mce_src="images/iconMaxPage.gif" style="cursor:point;right:0px;position:absolute;width:15px;height:15px;"> <xsl:attribute name="id"><xsl:value-of select="outerdiv/id"/>_maxImg</xsl:attribute> <xsl:attribute name="onclick">javascript:<xsl:value-of select="/root/fun_id"/>.maxWin(this);</xsl:attribute> </img> </div> </xsl:if> <div> <xsl:attribute name="id"><xsl:value-of select="outerdiv/id"/>_content</xsl:attribute> <xsl:attribute name="style">left:0px;position:absolute;width:100%;height:<xsl:value-of select="number(outerdiv/height)-20"/>px;</xsl:attribute> <xsl:choose> <xsl:when test="outerdiv/dragable = 1"> <xsl:attribute name="style">top:20px;left:0px;position:absolute;width:100%;height:<xsl:value-of select="number(outerdiv/height)-20"/>px;</xsl:attribute> </xsl:when> <xsl:otherwise> <xsl:attribute name="style">top:0px;left:0px;position:absolute;width:100%;height:<xsl:value-of select="number(outerdiv/height)"/>px;</xsl:attribute> </xsl:otherwise> </xsl:choose> <iframe width="100%" height="100%" scrolling="auto"> <xsl:attribute name="id"><xsl:value-of select="outerdiv/id"/>_iframe</xsl:attribute> <xsl:attribute name="src"><xsl:value-of select="outerdiv/framesrc"/></xsl:attribute> <!-- iframe --> </iframe> </div> <xsl:if test="outerdiv/dragable = 1"> <div style="width:2px; height:100%; background-color:#8BC4E5; top:0px; left:0px; float:left;position:absolute;cursor:e-resize;"> <xsl:attribute name="id"><xsl:value-of select="outerdiv/id"/>_leftborder</xsl:attribute> <xsl:attribute name="onMouseDown">javascript:<xsl:value-of select="/root/fun_id"/>.startResize('left',this,event);</xsl:attribute> <xsl:attribute name="onMouseMove">javascript:<xsl:value-of select="/root/fun_id"/>.resize(event);</xsl:attribute> <xsl:attribute name="onMouseUp">javascript:<xsl:value-of select="/root/fun_id"/>.stopResize(event);</xsl:attribute> <!-- leftborder --> </div> <div style="width:2px; height:100%; background-color:#8BC4E5; top:0px; right:0px; float:right;position:absolute;cursor:e-resize;"> <xsl:attribute name="id"><xsl:value-of select="outerdiv/id"/>_rightborder</xsl:attribute> <xsl:attribute name="onMouseDown">javascript:<xsl:value-of select="/root/fun_id"/>.startResize('right',this,event);</xsl:attribute> <xsl:attribute name="onMouseMove">javascript:<xsl:value-of select="/root/fun_id"/>.resize(event);</xsl:attribute> <xsl:attribute name="onMouseUp">javascript:<xsl:value-of select="/root/fun_id"/>.stopResize(event);</xsl:attribute> <!-- rightborder --> </div> <div style="font-size:2px;height:2px;width:100%; background-color:#8BC4E5; bottom:0px; position:absolute;cursor:s-resize;"> <xsl:attribute name="id"><xsl:value-of select="outerdiv/id"/>_bottomborder</xsl:attribute> <xsl:attribute name="onMouseDown">javascript:<xsl:value-of select="/root/fun_id"/>.startResize('bottom',this,event);</xsl:attribute> <xsl:attribute name="onMouseMove">javascript:<xsl:value-of select="/root/fun_id"/>.resize(event);</xsl:attribute> <xsl:attribute name="onMouseUp">javascript:<xsl:value-of select="/root/fun_id"/>.stopResize(event);</xsl:attribute> <!-- bottomborder --> </div> </xsl:if> </div> </xsl:for-each> <div style="bottom:0px;left:0px;position:absolute;z-index:9999;display:none" id="ulDiv"> <ul class="menu_h"> <li οnmοuseοver="this.className='sub_menu_on';" οnmοuseοut="this.className='sub_menu_off';" class="sub_menu_off"> <ul class="menu_v" id="minWinArray"> </ul> <span style="font-size:12px;font-weight:bold;" mce_style="font-size:12px;font-weight:bold;">最小化窗口</span> </li> </ul> </div> <div id="bodyHidDiv" style="display:none;z-index:1;position:absolute;top:0;left:0;background:ffffff;width:100%;height:100%;opacity:0;filter:alpha(opacity=0);"></div> <div id="iframeHidDiv" style="display:none;z-index:0;position:absolute;top:20px;left:0;background:#ffffff;width:100%;height:100%;opacity:0;filter:alpha(opacity=0);"></div> </xsl:template> </xsl:stylesheet> 

2.floatDivManager.js

function floatDivManager(_xsltPath){ var divIds = [];//存放模拟窗口div的id的数组，按照显示顺序排列 v