您的位置：首页 > Web前端 > JavaScript

JavaScript配合Div实现工具栏拖动

2009-12-30 11:41 369 查看
以下是一个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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航