在网上找了一段javascript写的浮动窗口的拖拽,发现因为浏览器版本等问题,使用有些问题,稍微修改了一些

来源:互联网 发布:中标麒麟软件大全 编辑:程序博客网 时间:2024/05/05 05:18
var x0=0,y0=0,x1=0,y1=0;var moveable=false;var hover='orange',normal='slategray';//color;var index=10000;//z-index;//开始拖动;function startDrag(obj){ if(event.button==0){ //定义对象; var win = obj.parentNode; var sha = win.nextSibling; //记录鼠标和层位置; x0 = event.clientX; y0 = event.clientY; x1 = parseInt(win.style.left); y1 = parseInt(win.style.top); //改变风格; obj.style.backgroundColor = hover; win.style.borderColor = hover; obj.nextSibling.style.color = hover; sha.style.left = x1 + 6; sha.style.top = y1 + 6; moveable = true; }}//拖动;function drag(obj){ if(moveable){ var win = obj.parentNode; var sha = win.nextSibling; win.style.left = x1 + event.clientX - x0; win.style.top = y1 + event.clientY - y0;sha.style.left = x1 + event.clientX - x0 + 6;sha.style.top = y1 + event.clientY - y0 + 6; }}//停止拖动;function stopDrag(obj){ if(moveable){ var win = obj.parentNode; var sha = win.nextSibling; var msg = obj.nextSibling; win.style.borderColor = normal; obj.style.backgroundColor = normal; msg.style.color = normal; sha.style.left = obj.parentNode.style.left; sha.style.top = obj.parentNode.style.top; moveable = false; }}//获得焦点;function getFocus(obj){ if(obj.style.zIndex!=index){  index = index + 2;  var idx = index;  obj.style.zIndex=idx;  obj.nextSibling.style.zIndex=idx-1; }}//最小化;function min(obj){ var win = obj.parentNode.parentNode; var sha = win.nextSibling; var tit = obj.parentNode; var msg = tit.nextSibling; var flg = msg.style.display=="none"; if(flg){  win.style.height  = parseInt(msg.style.height) + 31;  sha.style.height  = win.style.height;  win.style.width  = parseInt(msg.style.width) + 6.5;  sha.style.width  = win.style.width;  msg.style.display = "block";  obj.innerHTML = "0"; }else{  win.style.height  = 20;  sha.style.height  = 20;  win.style.width  = 100;  sha.style.width  = 100;  obj.innerHTML = "2";  msg.style.display = "none"; }}//关闭;function cls(obj){ var win = obj.parentNode.parentNode; var sha = win.nextSibling; win.style.visibility = "hidden"; sha.style.visibility = "hidden";}//创建一个对象;function xWin(id,w,h,l,t,tit,msg){index = index+2;this.id      = id;this.width   = w;this.height  = h;this.left    = l;this.top     = t;this.zIndex  = index;this.title   = tit;this.message = msg;this.obj     = null;this.bulid   = bulid;this.show    = showcywin;this.bulid();this.minwin  = minwindow;this.closeme = closemewin;}function minwindow(){var x=this.id;var win = document.getElementById("p"+x);var sha = document.getElementById("s"+x);var tit = document.getElementById(x);var msg = document.getElementById("t"+x);var mini = document.getElementById("n"+x);var flg = msg.style.display=="none";if(!flg){win.style.height = 20;sha.style.height  = 20;win.style.width  = 100;sha.style.width  = 100;mini.innerHTML   = "2";msg.style.display="none";}}function closemewin(){  var x=this.id;  document.getElementById("p"+x).style.visibility ="hidden";  document.getElementById("s"+x).style.visibility ="hidden";}function showcywin(){var x=this.id;document.getElementById("p"+x).style.visibility="visible";document.getElementById("s"+x).style.visibility="visible";if(document.getElementById("t"+x).style.display=="none"){ var win = document.getElementById("p"+x);var sha = document.getElementById("s"+x);var mini = document.getElementById("n"+x);var msg = document.getElementById("t"+x);win.style.height = parseInt(msg.style.height) + 31;  sha.style.height = win.style.height;  win.style.width  = parseInt(msg.style.width) + 6.5;  sha.style.width  = win.style.width;msg.style.display ="block";mini.innerHTML="0";} }//初始化;function bulid(){ var str = ""+ "<div id=p" + this.id + " "+ "style='"+ "z-index:" + this.zIndex + ";"+ "width:" + this.width + ";"+ "height:" + this.height + ";"+ "left:" + this.left + ";"+ "top:" + this.top + ";"+ "background-color:white;"//+ "color:" + normal + ";"+ "font-size:12px;"//+ "font-family:Verdana;"+ "position:absolute;"+ "cursor:default;"+ "border:2px solid " + normal + ";"+ "' "+ "onmousedown='getFocus(this)'>"+ "<div id=" + this.id + " "+ "style='"+ "background-color:" + normal + ";"+ "width:100%;"+ "height:21;"+ "color:white;"+ "' "+ "onmousedown='startDrag(this)' "+ "onmouseup='stopDrag(this)' "+ "onmousemove='drag(this)' "+ "ondblclick='min(this.childNodes[1])'"+ ">"+ "<span style='width:" + (this.width-2*12-4) + ";position:relative;top:2px;padding-left:3px;'>" + this.title + "</span>"+ "<span id=n" + this.id + " "+ "style='width:12;border-width:0px;color:white;position:absolute;right:15px;top:2px;font-family:webdings;' onclick='min(this)'>0</span>"+ "<span style='width:12;border-width:0px;color:white;position:absolute;right:2px;top:2px;font-family:webdings;' onclick='cls(this)'>r</span>"+ "</div>"+ "<div id=t" + this.id + " "+ "style='"+ "width:" + (this.width-6.5) + ";"+ "height:" + (this.height-31) + ";"+ "background-color:white;"
+ "color:" + normal + ";"+ "line-height:18px;"+ "word-break:break-all;"+ "padding:3px;font-size:12px;"+ "'>" + this.message + "</div>"+ "</div>"+ "<div id=s" + this.id + " "+ "style='"+ "width:" + this.width + ";"+ "height:" + this.height + ";"+ "top:" + (this.top) + ";"+ "left:" + (this.left) + ";"+ "z-index:" + (this.zIndex-1) + ";"+ "position:absolute;"+ "background-color:black;"+ "opacity:0.4;"+ "'></div>"; document.body.insertAdjacentHTML("beforeEnd",str); //this.thiswin=document.getElementById("xMsg"+this.id);}


                                             
0 0
原创粉丝点击