无法设拖拽边界

源自：4-2 [DOM事件] QQ面板拖拽效果（下）

无法设拖拽边界

<!doctype html>

<html>

<head>

<title>Document</title>

<style>

*{margin:0;padding:0;}

#login_box{width:300px;height:150px;background:#eee;

border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:block;position: absolute;}

#login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}

#close{width:14px;height:14px;background:yellow no-repeat;position:absolute;right:4px;top:6px;}

</style>

window.onload=drag;

function drag(){

var ott = getClassName('title','login_box')[0];

ott.onmousedown = ottDown;

}

function ottDown(event){

var dl = document.getElementById('login_box');

//光标按下时距离面板的左、上距离

var jdlx = event.clientX-dl.offsetLeft,

jdly = event.clientY-dl.offsetTop;

//面板中间到边边距离

var mbx = dl.offsetWidth/2,

mby = dl.offsetHeight/2;

//获取窗口最大值

var maxW=document.documentElement.clientWidth - dl.offsetWidth,

maxH=document.documentElement.clientHeight - dl.offsetHeight;

document.onmousemove = function(event){

event = event ||document.event;

if(jdlx>mbx){

var m = jdlx - mbx;

var n = mby - jdly;

var x = event.clientX - m,

y = event.clientY + n;

if(x<0){

x=0;

}else if(x>maxW){

x=maxW;

}

if(y<0){

y=0;

}else if (y>maxH){

y=maxH;

}

dl.style.left = x +'px';

dl.style.top = y +'px';

}else if (jdlx<mbx){

var m = mbx - jdlx;

var n = mby - jdly;

var x = event.clientX + m,

y = event.clientY + n;

if(x<0){

x=0;

}else if(x>maxW){

x=maxW;

}

if(y<0){

y=0;

}else if (y>maxH){

y=maxH;

}

dl.style.left = x +'px';

dl.style.top = y +'px';

}

//求出点击位置距离登录窗口的left、top

// var jdlx = event.clientX-dl.offsetLeft;

// var jdly = event.clientY-dl.offsetTop;

}

//封装getClassName方法

function getClassName(classn,parent){

var oParent = parent?document.getElementById(parent):document;

var oc = [];

var otn=oParent.getElementsByTagName('*');

for(i=0,l=otn.length;i<l;i++){

if(otn[i].className==classn){

oc.push(otn[i]);

}

return oc;

}

</script>

</head>

<body>

</div>

</body>

</html>

//在HBuilder里面一开始执行发现光标始终跟着面板中心，所以设置有点不一样。但是边界设置=0之后发现实际边界向左偏移了。

提问者：qq_慕圣626863 2019-07-05 14:40

无法设拖拽边界

个回答