在线急等：如何在js里面判断才能不让上面的div移出下面的div，牛人谁来帮帮忙

<!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>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script language="JavaScript" type="text/javascript">
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')
var oevent=new Function('e','if (!e) e = window.event;return e')
function Move_obj(obj){
 var x,y;
 D(obj).onmousedown=function(e){
  drag_=true;
  with(this){
  style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;
  x=oevent(e).clientX;y=oevent(e).clientY;
  document.onmousemove=function(e){
  if(!drag_)return false;
  with(this){
  style.left=temp1+oevent(e).clientX-x+"px";
  style.top=temp2+oevent(e).clientY-y+"px";
  }
  }
  }
  document.onmouseup=new Function("drag_=false");
 }
}
</script>
<body>
<div style=" background:#F00; width:500px; height:500px; position:absolute; left:150px;top:30px;">
<div id="test" style="background-color:#0099CC;width:200px;height:100px;border:1px #000 solid;" onmouseover='Move_obj("test")'>鼠标过来点击拖动层</div>
</div></body>
</html>  牛人们，帮帮忙，如何在js里面判断才能不让上面的div移出下面的div ，要兼容所有的浏览器，

解决方案 »

  1.   

    就是判断别让小块的left和top别超出某个值呗。
    你找找相关的属性，如果兼容性不好解决的话就用JQuery试试
      

  2.   

    利用
    style.marginTop
    style.marginLeft
    style.marginRight 
    style.marginBottom
    margin指的是相对 也就是距离父节点的距离
    这回有办法了吧
      

  3.   

    让里面的div的left大于等于外面div的left小于等于（外面div的left+外面div的width）
    让里面的div的top大于等于外面div的top小于等于（外面div的top+外面div的height）