JavaScript配合Div实现工具栏拖动
2009-12-30 11:41
399 查看
以下是一个JavaScript配合Div实现的模拟Word工具栏拖动的效果代码:
<html> <head> <title>CSS Drop</title> <mce:style type="text/css"><!-- a:link { font-size:10px; color:#cccccc; } a:hover { border:solid 1px navy; background-color:lightblue; } img { width:16px; height:16px; } --></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"><!-- function beginDrag(elementToDrag,event){ //计算元素原左上角与鼠标的距离 //moveHandler要这值 /*计算对象与鼠标之间的距离,x,y坐标*/ var delatX=event.clientX-parseInt(elementToDrag.style.left); var delatY=event.clientY-parseInt(elementToDrag.style.top); //注册响应mousemove和mousedown事件后的mouseup事件的处理程序 if(document.addEventListener){ //2级DOM事件模型 //注册捕捉事件处理程序 document.addEventListener("mousemove",moveHandler,true); //添加事件,并设置事件的相应顺序 true为先执行 moveHandler() document.addEventListener("mouseup",upHandler,true); } else if(document.attachEvent){ //IE5+ 的事件模型 /*在IE事件模型中,我们不能捕捉事件,所以只有当事件起泡到这些处理程序时, 它们才被触发. 假设不存在干涉元素, 处理了事件后它们就停止传播*/ document.attachEvent("onmousemove",moveHandler); document.attachEvent("onmouseup",upHandler); } else{ //IE4事件模型 //IE4我们不能使用attachEvent方法,所以存储了以前赋予的处理 //程序后,直接赋予新的事件处理程序,这样可以恢复旧的处理程序. //注意,这样依赖于事件起泡. var oldmovehandler=document.onmousemove; var olduphandler=document.onmouseup; document.onmousemove=moveHandler; document.onmouseup=upHandler; } //我们处理了该事件,不要再让其他元素看见. if(event.stopPropagation)event.stopPropagation(); //2 级DOM else event.cancelBubble=true; //IE //下面禁止执行默认动作 if(event.preventDefault)event.preventDefault(); //2级DOM else event.returnValue=false; //IE /*这是元素被拖动时捕捉mousemove事件的处理程序. * 它负责移动元素 */ function moveHandler(e){ if(!e)e=window.event; //IE事件模型; //把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整 elementToDrag.style.left=(e.clientX-delatX)+"px"; //e.clientX 鼠标位置 elementToDrag.style.top=(e.clientY-delatY)+"px"; //不要再让其他元素看到该事件. if(e.stopPropagation)e.stopPropagation(); //2级DOM else e.cancelBubble=true; //IE } /* 这是捕捉拖移结束最后发生的mouseup事件的处理程序. */ function upHandler(e){ if(!e) e=window.event; //IE事件模型. //注销捕捉事件程序. if(document.removeEventListener){//DOM事件模型 document.removeEventListener("mouseup",upHandler,true); document.removeEventListener("mousemove",moveHandler,true); } else if(document.detachEvent){//IE5+事件模型 document.detachEvent("onmouseup",upHandler); document.detachEvent("onmousemove",moveHandler); } else{//IE事件模型 document.onmouseup=olduphandler; document.onousemove=oldmovehandler; } //不要再让事件进一步传播. if(e.stopPropagation) e.stopPropagation(); //2级DOM else e.cancelBubble = true; //IE } } function showWord(){ var words="这是一个测试的擦撕开对方军开进阿飞分速度发动了解咖啡色风格送给肤色通过热乎乎过堂风回归热"; var content = document.getElementById("content"); for(var i=0;i<words.length;i++){ window.setInterval(function(){ content.innerText+=words.charAt(i); },1000); } } // --></mce:script> </head> <body> <!--img src="014506953.jpg" style="position:absolute;left:0px;top:0px;" onmousedown="beginDrag(this,event);"--> <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>
相关文章推荐
- javascript 拖动div的一种实现
- javascript实现div的拖动并调整大小类似qq空间个性编辑模块
- javascript 实现简单的div拖动
- Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现
- Javascript实现的类似Google的Div拖动效果代码
- 使用JavaScript和DIV实现WebGIS中的鼠标拖动绘制矩形
- javascript实现可拖动DIV层
- JavaScript实现DIV拖动效果
- javascript实现div的拖动并调整大小类似qq空间个性编辑模块
- javascript实现div的拖动并调整大小
- JavaScript实现可拖拽的拖动层Div实例
- Javascript实现的类似Google的Div拖动效果代码
- Javascript实现的类似Google的Div拖动代码
- Javascript 实现 div 的拖动
- Javascript实现div的鼠标拖动
- Javascript简单实现可拖动的div
- javascript 实现简单的div拖动
- Javascript简单实现可拖动的div
- javascript + DIV +CSS 实现可拖动消息窗体