JavaScript配合Div实现工具栏拖动

来源：互联网发布：阿里巴巴数据图片尺寸编辑：程序博客网时间：2024/06/05 09:46

以下是一个JavaScript配合Div实现的模拟Word工具栏拖动的效果代码：

<html> <head> <title>CSS Drop</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">a:link { font-size:10px; color:#cccccc;}a:hover {border:solid 1px navy;background-color:lightblue;}img {width:16px;height:16px;} </style> <mce:script type="text/javascript"></mce:script> </head> <body>  <div id="toolbar" style="position:absolute;left:20px;top:10px;width:500px;height:20px;background-color:#eeeeee;border:solid 1px navy;z-index:999" onMouseDown="beginDrag(this,event);"> <a href="#" mce_href="#" title="饼状报表"><img src="images/BD14982_.GIF" mce_src="images/BD14982_.GIF" border="0"></a> <a href="#" mce_href="#" title="分类报表"><img src="images/BD15018_.GIF" mce_src="images/BD15018_.GIF" border="0"></a> <a href="#" mce_href="#" title="对比报表"><img src="images/BD15019_.GIF" mce_src="images/BD15019_.GIF" border="0"></a> <a href="#" mce_href="#" title="一般报表"><img src="images/BD15020_.GIF" mce_src="images/BD15020_.GIF" border="0"></a>| <select> <option value="500%">500%</option> <option value="200%">200%</option> <option value="150%">150%</option> <option value="100%">100%</option> <option value="75%">75%</option> <option value="50%">50%</option> <option value="25%">25%</option> <option value="10%">10%</option> </select>| <a href="#" mce_href="#"><img src="images/BD15168_.GIF" mce_src="images/BD15168_.GIF" border="0"></a> <a href="#" mce_href="#"><img src="images/BD15169_.GIF" mce_src="images/BD15169_.GIF" border="0"></a>| <a href="#" mce_href="#"><img src="images/BD21295_.GIF" mce_src="images/BD21295_.GIF" border="0"></a> <a href="#" mce_href="#"><img src="images/BD21302_.GIF" mce_src="images/BD21302_.GIF" border="0"></a>| <a href="#" mce_href="#"><img src="images/BD21304_.GIF" mce_src="images/BD21304_.GIF" border="0"></a> <a href="javascript:showWord()" mce_href="javascript:showWord()"><img src="images/BD21306_.GIF" mce_src="images/BD21306_.GIF" border="0"></a>| <select name="Group"> <optgroup label="水果"> <option value="苹果">苹果</option> <option value="桃子">桃子</option> </optgroup> <optgroup label="蔬菜"> <option value="萝卜">萝卜</option><option value="黄瓜">黄瓜</option> </optgroup> </select> </div> <div id="content" style="position:relative;left:10px;top:20px;width:95%;height:95%;border:solid 1px #000000;word-wrap:auto"> </div></body> </html>