怎么限定在某一范围内拖动？

一个类似提示框，可以拖动，存在一个问题，如果拖到窗口外就不能拖回来了，怎么能做个限制？
大家看看要怎么做？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.backgroundIframe{
position:absolute;
z-index:-1;
width:100%;
height:100%;
top:0;left:0;
}
</style>
<script language=javascript>var simpleDrag_beginMoving=false;
var simpleDrag_header=null;function simpleDrag_Mousedown(mouseEvent,obj){
simpleDrag_beginMoving=true;
mouseEvent=mouseEvent||window.event;
simpleDrag_header=obj;
var theAlterableTable=simpleDrag_header.offsetParent;
simpleDrag_header.mouseDownX=theAlterableTable.offsetLeft-mouseEvent.clientX;
simpleDrag_header.mouseDownY=theAlterableTable.offsetTop-mouseEvent.clientY;
if(simpleDrag_header.setCapture)simpleDrag_header.setCapture();
else mouseEvent.preventDefault();
}
function simpleDrag_Mousemove(mouseEvent){
if(!simpleDrag_beginMoving) return ;
mouseEvent=mouseEvent||window.event;
var theAlterableTable=simpleDrag_header.offsetParent;
if(mouseEvent.clientX>1) //防止被移出页面之外，造成无法移回的后果
  theAlterableTable.style.left = simpleDrag_header.mouseDownX+mouseEvent.clientX;
if(mouseEvent.clientY>1)
  theAlterableTable.style.top = simpleDrag_header.mouseDownY+mouseEvent.clientY;
}
function simpleDrag_Mouseup(obj){
if(!simpleDrag_beginMoving) return ;
if(simpleDrag_header.releaseCapture)simpleDrag_header.releaseCapture();
simpleDrag_beginMoving=false;
}</script>
<script defer>
document.onmousemove=simpleDrag_Mousemove;
document.onmouseup=simpleDrag_Mouseup;
</script>
</head><body>
<div style="font-size:10pt;">
注1：本页面示例：简单拖动(Drag) <br/>

<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>
注-----：作者JK：<a href="mailTo:[email protected]?subject=About%20SimpleDrag">[email protected]</a><br/>
<hr/>
</div>
<select><option>Select for Test</select>    <div style="position:absolute;top:50;left:50;width:200;background-color:#eeeeee;z-index:10;border:1px solid #777777;" >
  
  <div onmousedown="simpleDrag_Mousedown(event,this)" style="cursor:move;background-color:#cccccc;width:100%;" >header</div>
  <div style="background-color:#ffffff;">content</div>
</div>
<div style="position:absolute;top:40;left:40;width:200;background-color:#eeeeee;z-index:10;border:1px solid #777777;" >
  <iframe  class="backgroundIframe" frameborder=0 ></iframe>
  <div onmousedown="simpleDrag_Mousedown(event,this)" style="cursor:move;background-color:#cccccc;width:100%;" >header</div>
  <div style="background-color:#ffffff;">content</div>
</div></body>
</html>