那个DOM时间探秘中的qq面板拖曳问题模仿写了一下代码发现拖不动，，不知道哪里错了。。
<!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>qq面板拖曳</title>
<style type="text/css">
#qqmb{
width: 300px;
height: 200px;
border: black solid 1px;
margin: 150px auto;
}
.yiDong{
width: 50px;
height: 50px;
border: black solid 1px;
margin: 20px auto;
}
</style>
<script>
function getByClass(clsName,parent){
var oParent = parent?document.getElementById(oparent):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.onload=drag;
function drag(){
var oTitle = getByClass('yiDong','qqmb')[0];
oTitle.onmousedown=fnDown;
}
function fnDown(event){
event = event || window.event;
var oDrag = document.getElementById('qqmb'),
//光标按下时光标和面板之间的距离
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("qqmb"),
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.offsetLeft,
maxH = winH - oDrag.offsetTop;
if (l<0){
l = 0;
}else if(l>maxW){
t = maxW;
}
if (t<0){
t=0;
}else if(t>maxH){
t=maxH;
}
oDrag.style.left = l +'px';
oDrag.style.top = t +'px';
}
</script>
</head>
<body>
<div id="qqmb">
<div class="yiDong">
</div>
</div>
</body>
</html>
lyluly1回答
-
执凉
css定位也没加、js里有个参数写错了，能不能细心点兄弟。
随时随地看视频慕课网APP
相关分类
JavaScript