为什么一点击标题，我的鼠标就跑到了浏览器左上角、、、
fluent
2015-08-02 15:05
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:0;
padding:0;
text-decoration:none;
font-size:20px;
}
#tab{
width:300px;
height:250px;
position:absolute;
border:5px solid #eee;
margin:100px 510px;
box-shadow:0 0 20px #999;
}
#title{
position:absolute;
width:100px;
left:70px;
border-bottom:1px solid #CCC;
margin:10px 20px;
padding:10px;
}
#title p{
display:block;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=drag;
function drag(){
var oTitle=document.getElementById("p");
// 拖曳
oTitle.onmousedown=fnDown;
}
function fnDown(event){
event = event || window.event;
var oDrag=document.getElementById('tab'),
// 光标按下时光标和面板之间的距离
disX=event.clientX-oDrag.offsetLeft,
disY=event.clientY-oDrag.offsetTop;
// 移动
document.onmousemove=function(event){
event = event || window.event;
fnMove(event,disX,disY);
}
// 释放鼠标
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
function fnMove(e,posX,posY){
var oDrag=document.getElementById('tab'),
l=e.clientX-posX,
t=e.clientY-posY,
winW=document.documentElement.clientWidth || document.body.clientWidth,
winH=document.documentElement.clientHeight || document.body.clientHeight,
maxW=winW-oDrag.offsetWidth-10,
maxH=winH-oDrag.offsetHeight;
if(l<0){
l=0;
}else if(l>maxW){
l=maxW;
}
if(t<0){
t=10;
}else if(t>maxH){
t=maxH;
}
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}
</script>
</head>
<body>
<div id="tab">
<div id="title" class="title">
<p id="p" class="p">QQ登陆</p>
</div>
</div>
</body>
</html>
3回答
-
- A潜水的鱼
- 2016-01-14 23:25:00
还有一个方法是，那就是将function fnMove(e,posX,posY){oDrag.style.left=l+'px';oDrag.style.top=t+'px';}换成l=e.clientX-posX-200;t=e.clientY-posY-200;我试了半天才发现你的问题就是和你设置的margin有关。希望对你有帮助。
-
- A潜水的鱼
- 2016-01-14 23:21:20
margin的问题，你可以将 #tab{margin:100px 510px； }的margin换成top:100px;left:510px;就没问题了
-
- 受戒人
- 2015-12-17 10:57:45
你的定位是否正确？
DOM事件探秘
99532 学习 · 1305 问题
相似问题