层移动到窗体底部导致内容向下滚动后，鼠标与层脱离的问题求助

yiran5467 2008-10-17 03:23:37

下面的代码是想实现层的移动，但当快速拖动层到窗体底部导致窗体内容向下滚动时，松开鼠标后层不会停止移动，而是继续随鼠标移动，但鼠标指针跑到了层范围之外无法操控，哪位高手给指点下。

<html>
<head>
</head>
<body onmousemove="move('floatDiv',event)">
<script>
var down=false,divleft,divtop;

function move(objId,e){
if(e==null) e=window.event;

var obj=document.getElementById(objId);
if(down){
obj.style.left=e.clientX-divleft;
obj.style.top=e.clientY-divtop
}

if(parseInt(obj.style.left)<0) obj.style.left=10; //左边界限制
if(parseInt(obj.style.top)<0) obj.style.top=10; //上边界限制

//右边界限制
if(parseInt(obj.style.left)>(document.body.clientWidth-obj.clientWidth))
obj.style.left=document.body.clientWidth-obj.clientWidth-10;

//下边界限制
var sClientHeight=document.body.clientHeight;
var sScrollTop=(document.documentElement.scrollTop||document.body.scrollTop);
if(parseInt(obj.style.top)>(sClientHeight+sScrollTop-obj.clientHeight))
obj.style.top=sClientHeight+sScrollTop-obj.clientHeight-10;

obj.innerHTML='X:'+obj.style.left+" Y:"+obj.style.top;
}
</script>
asdfasdfasdf 
asdfasdfasdf asdfasdfasdf asdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdf2008-10-16asdfasdfasdf 
asdfasdfasdf asdfasdfasdf asdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asas
<div id="floatDiv" style="z-index:888; position:absolute; left:300px; top:100px; width:100px; height:200px; cursor:move; border:1px solid black; background:#EEEEEE;" onmousedown="down=true; divleft=event.clientX-parseInt(this.style.left); divtop=event.clientY-parseInt(this.style.top);" onmouseup="down=false;"></div>
</body>
</html>

...全文

79 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

yiran5467 2008-10-20

打赏
举报

解决了

<html>
<head>
</head>
<body onmousemove="move('floatDiv',event)">
<script>
var down=false,divleft,divtop;

function move(objId,e){
if(e==null) e=window.event;

var sClientHeight=document.body.clientHeight;
var sScrollTop=(document.documentElement.scrollTop||document.body.scrollTop);
var obj=document.getElementById(objId);

if(down){
obj.style.left=e.clientX-divleft;
obj.style.top=e.clientY-divtop;
}

if(parseInt(obj.style.left)<0) obj.style.left=0; //左边界限制
if(parseInt(obj.style.top)<sScrollTop) obj.style.top=sScrollTop+10; //上边界限制

if(parseInt(obj.style.left)>(document.body.clientWidth-obj.clientWidth))//右边界限制
obj.style.left=document.body.clientWidth-obj.clientWidth-20;

//下边界限制

if(parseInt(obj.style.top)>(sClientHeight+sScrollTop-obj.clientHeight-10))
obj.style.top=sClientHeight+sScrollTop-obj.clientHeight-10;
}
</script>
asdfasdfasdf 
asdfasdfasdf asdfasdfasdf asdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdf2008-10-16asdfasdfasdf 
asdfasdfasdf asdfasdfasdf asdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asasdfasdfasdf 
asdfasdfasdf asdfasdfasdf asas
<div id="floatDiv" style="z-index:888; position:absolute; left:300px; top:100px; width:100px; height:200px; cursor:move; border:1px solid black; background:#EEEEEE;" onmousedown="down=true; divleft=event.clientX-parseInt(floatDiv.style.left); divtop=event.clientY-parseInt(floatDiv.style.top);if(document.all) this.setCapture(); else {document.addEventListener('mousemove',move,true);window.captureEvents(Event.MOUSEMOVE);event.preventDefault();}" onmouseup="down=false; if(document.all) this.releaseCapture(); else {document.removeEventListener('mousemove',move,true);window.releaseEvents(Event.MOUSEMOVE);}"> </div>
</body>
</html>

MOTA 2008-10-17

打赏
举报

document.onmousedown=null;
清空按下事件~~

Go 旅城通票 2008-10-17

打赏
举报

firefox捕捉事件后也不能阻止出框，没搞

yiran5467 2008-10-17

打赏
举报

有没有办法兼容FF?

Go 旅城通票 2008-10-17

打赏
举报

<div id="floatDiv" style="z-index:888; position:absolute; left:300px; top:100px; width:100px; height:200px; cursor:move; border:1px solid black; background:#EEEEEE;" onmousedown="down=true; divleft=event.clientX-parseInt(this.style.left); divtop=event.clientY-parseInt(this.style.top);this.setCapture()" onmouseup="down=false;this.releaseCapture()"> </div>

加上上面红色的就不会出框了