首页 > javascript知识库 > js实现拖动窗口效果,原创,兼容个版本浏览器

js实现拖动窗口效果,原创,兼容个版本浏览器

2015年3月14日 发表评论 阅读评论

用js实现的拖动窗口效果,兼容个版本浏览器,源码如下
// JavaScript Document
var drag_what=false//“耽误”参数
var div_who
var zindexvalue = 0

function drag_do(who){
drag_what=true
div_who=who
zindexvalue++
document.getElementById(div_who).style.zIndex=zindexvalue
}//单击drag_div时候将这个“耽误参数设置成另一个属性”

var mousedown_clientX,mousedown_clientY,login_offsetLeft,login_offsetTop//声明全局变量

function doc_onmousedown(evt){
evt=evt?evt:window.event
parentTagName=evt.srcElement?evt.srcElement:evt.target
if(parentTagName.tagName!=”HTML”){
mousedown_clientX=evt.clientX//鼠标单击拖动层时候的坐标x
mousedown_clientY=evt.clientY
var obj=document.getElementById(div_who)
login_offsetLeft=obj.offsetLeft//这里也可以用obj.style.posLeft或 obj.style.pixelLeft(因为他们都是获取login到页面左边的距离(数值型style.left是字符串,不能直接用))
//始获取到login离页面的x方向距离(css中的:margin-left:50px;)
login_offsetTop=obj.offsetTop
}//鼠标单击drag_div时触发的事件
}

function doc_onmousemove(evt){
if(drag_what==true){
drag_what=true//此句可以不要,无聊就加上去了
evt=evt?evt:window.event
//screen_y=evt.screenY
stop_x=evt.clientX//再次获取鼠标移动时的坐标x
stop_y=evt.clientY
move_x=stop_x-mousedown_clientX+login_offsetLeft//相减两次获取鼠标的坐标位置+距离x方向的距离=应该移动到的距离x
move_y=stop_y-mousedown_clientY+login_offsetTop
var obj=document.getElementById(div_who)
if(document.all){
obj.setCapture()
}
else {
//window.captureEvents(Event.MOUSEMOVE),这段代码本来需要。但是在为页面绑定事件的时候已经写了:usecaputure为true了(FF中专用,ie要像上面一样设置.)
}
obj.style.left=move_x+”px”//设置login的x方向的坐标,要加px,要不然FF中不正常
obj.style.top=move_y+”px”
}
}//鼠标在drag_div上移动时触发的事件

function doc_onmouseup(){
var obj=document.getElementById(div_who)
if(document.all){
obj.releaseCapture()
}
else{
window.releaseEvents(Event.MOUSEUP)
}
drag_what=false
}//鼠标脱离drag_div时触发的事件

if(navigator.appName==”Microsoft Internet Explorer”){//if中的内容可以写成:document.all
document.attachEvent(‘onmousedown’,doc_onmousedown)
}
else{
document.addEventListener(“mousedown”,doc_onmousedown,false)
}

if(navigator.appName==”Microsoft Internet Explorer”){
document.attachEvent(“onmousemove”,doc_onmousemove)
}
else{
document.addEventListener(“mousemove”,doc_onmousemove,true)
//obj.addEventListener(“事件”,函数,是否使用captureEvents(true or false))
}

if(navigator.appName==”Microsoft Internet Explorer”){
document.attachEvent(“onmouseup”,doc_onmouseup)
}
else{
document.addEventListener(“mouseup”,doc_onmouseup,false)
}
//判断浏览器类型,在页面上绑定不同的事件(注意它们的写法不一样,ie中是直接写事件名,如nmousedown,而ff等要去掉on,而且后面要加false)

function closewall(who) {
document.getElementById(who).style.display=”none”
}

分类: javascript知识库 标签: ,
  1. 本文目前尚无任何评论.
您必须在 登录 后才能发布评论.
css.php