网页拖动模块，Js层拖拽，加减号收缩和展开

发布时间：2018-08-19 00:45:50 所属栏目：活动来源：站长网

导读：网页拖动模块，加减号收缩和展开，Js仿Google和Windows Live的拖拽，不但实现了网页模块的拖动，还可关闭、展开、收缩层窗口，自动排序，拖拽的时候自动吸附到落点上，自动把位置排列整齐，很是佩服作者啦。示例： HTMLHEADTITLE仿Google和Windows Live的

　　网页拖动模块，加减号收缩和展开，Js仿Google和Windows Live的拖拽，不但实现了网页模块的拖动，还可关闭、展开、收缩层窗口，自动排序，拖拽的时候自动吸附到落点上，自动把位置排列整齐，很是佩服作者啦。

　　示例：

<HTML> <HEAD> <TITLE>仿Google和Windows Live的拖拽</TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30); } .normal { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#FFFFFF; } .over { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#f3f3f3; filter: alpha(opacity=50); } .dragArea { CURSOR: move; } </style> </HEAD> <BODY oncontextmenu="window.event.returnValue=false"> <input type="text" id="evt" name="eventValue" size="40" /> <div id="dragHelper" style="display:none"></div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td><a href="#">baidu.com</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.baidu.com</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.sina.com.cn</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>源码</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.veryhuo.com</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.qq.com</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> </BODY> <SCRIPT LANGUAGE="<b>Java</b>Script">  </SCRIPT> </HTML> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!