無法設(shè)拖拽邊界
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<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>
<script>
? ? ? window.onload=drag;
? ? ??
? ? ? function drag(){
? ? ? ?var ott = getClassName('title','login_box')[0];
? ? ? ?ott.onmousedown = ottDown;
? ? ? }
? ? ? ?function ottDown(event){
? ? ? ?var dl = document.getElementById('login_box');
? ? ? ?//光標(biāo)按下時(shí)距離面板的左、上距離
? ? ? ?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';
? ? ? ?}
? ? ? ?
? ? ? ?
? ? ? ?//求出點(diǎn)擊位置距離登錄窗口的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 id="login_box">
<p class="title">用戶登錄</p><span id="close"></span>
</div>
</body>
</html>
//在HBuilder里面一開始執(zhí)行發(fā)現(xiàn)光標(biāo)始終跟著面板中心，所以設(shè)置有點(diǎn)不一樣。但是邊界設(shè)置=0之后發(fā)現(xiàn)實(shí)際邊界向左偏移了。
2022-11-09
是你容器沒有處理好