function getByClass(clsName,parent){
var oParent=parent?document.getElementById(parent):document,
eles=[],elements=oParent.getElementsByTagName("*");
for(var i=0;i<elements.length;i++){
if(elements[i].className==clsName){
eles.push(elements[i]);
}
}
return eles;
}
window.οnlοad=drag;
function drag(){
var oTitle=getByClass("login_webqq","loginPanel")[0];
oTitle.οnmοusedοwn=fnDown;
}
function fnDown(event){//clientX、clientY光标在窗口中的横纵坐标，不包含滚动的位置
var oDrag=document.getElementById("loginPanel");
var rules=document.styleSheets[0].rules || document.styleSheets[0].cssRules;
event=event || window.event;
//光标距离浏览器的距离-面板距离浏览器窗口的距离=光标按下时和面板的距离
var disX=event.clientX-oDrag.offsetLeft,disY=event.clientY-oDrag.offsetTop;
//移动
document.οnmοusemοve=function(event){
event=event || window.event;
fnMove(event,disX,disY);
}
//释放,面板不要跟着光标走了
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
function fnMove(event,disX,disY){
var oDrag=document.getElementById("loginPanel");
var rules=document.styleSheets[0].rules || document.styleSheets[0].cssRules;
var l=event.clientX-disX,t=event.clientY-disY,
winW=document.documentElement.clientWidth || document.body.clientWidth,
winH=document.documentElement.clientHeight || document.body.clientHeight,//窗口的宽和高
maxW=winW-oDrag.offsetWidth,//最大宽度
maxH=winH-oDrag.offsetHeight;//最大高度
if(l<0){
l=0;
}else if(l>maxW){
l=maxW;
}
if(t<0){
t=0;
}else if(t>maxH){
t=maxH;
}
rules[0].style.left=l+"px";
rules[0].style.top=t+"px";
//document.title=event.clientX+","+event.clientY;
}
<!DOCTYPE html>
<html>
<head>
<title>拖动效果</title>
<meta charset="utf-8"/>
<script src="drag2.js" type="text/javascript"></script>
<link href="drag.css" rel="stylesheet" type="text/css"/>
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="loginPanel" >
<div class="login_webqq"></div>
<form method="post" id="form1" action="">
用户名:<input name="username" value=""/><br/><br/>
密 码:<input name="password" value=""/><br/><br/>
<input value="登录" type="submit"/> <input value="取消" type="reset"/>
<form>
</div>
<div class="main2"></div>
<body>
</html>
var oParent=parent?document.getElementById(parent):document,
eles=[],elements=oParent.getElementsByTagName("*");
for(var i=0;i<elements.length;i++){
if(elements[i].className==clsName){
eles.push(elements[i]);
}
}
return eles;
}
window.οnlοad=drag;
function drag(){
var oTitle=getByClass("login_webqq","loginPanel")[0];
oTitle.οnmοusedοwn=fnDown;
}
function fnDown(event){//clientX、clientY光标在窗口中的横纵坐标，不包含滚动的位置
var oDrag=document.getElementById("loginPanel");
var rules=document.styleSheets[0].rules || document.styleSheets[0].cssRules;
event=event || window.event;
//光标距离浏览器的距离-面板距离浏览器窗口的距离=光标按下时和面板的距离
var disX=event.clientX-oDrag.offsetLeft,disY=event.clientY-oDrag.offsetTop;
//移动
document.οnmοusemοve=function(event){
event=event || window.event;
fnMove(event,disX,disY);
}
//释放,面板不要跟着光标走了
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
function fnMove(event,disX,disY){
var oDrag=document.getElementById("loginPanel");
var rules=document.styleSheets[0].rules || document.styleSheets[0].cssRules;
var l=event.clientX-disX,t=event.clientY-disY,
winW=document.documentElement.clientWidth || document.body.clientWidth,
winH=document.documentElement.clientHeight || document.body.clientHeight,//窗口的宽和高
maxW=winW-oDrag.offsetWidth,//最大宽度
maxH=winH-oDrag.offsetHeight;//最大高度
if(l<0){
l=0;
}else if(l>maxW){
l=maxW;
}
if(t<0){
t=0;
}else if(t>maxH){
t=maxH;
}
rules[0].style.left=l+"px";
rules[0].style.top=t+"px";
//document.title=event.clientX+","+event.clientY;
}
<!DOCTYPE html>
<html>
<head>
<title>拖动效果</title>
<meta charset="utf-8"/>
<script src="drag2.js" type="text/javascript"></script>
<link href="drag.css" rel="stylesheet" type="text/css"/>
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="loginPanel" >
<div class="login_webqq"></div>
<form method="post" id="form1" action="">
用户名:<input name="username" value=""/><br/><br/>
密 码:<input name="password" value=""/><br/><br/>
<input value="登录" type="submit"/> <input value="取消" type="reset"/>
<form>
</div>
<div class="main2"></div>
<body>
</html>
4863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
