js拖拽不出指定对象

#div1{ width:500px; height: 300px; background-color: #ccc; position: relative;margin: 30px auto;}#div2{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 0;}

<div id="div1">　　<div id="div2"></div></div>

var div1=document.getElementById("div1"); ???var div2=document.getElementById("div2"); ???div2.onmousedown=function(ev){ ???????var e=ev || event; ???????var disX=e.clientX-div2.offsetLeft; ???????var disY=e.clientY-div2.offsetTop; ???????document.onmousemove=function(ev){ ???????????var e=ev || event; ???????????var l=e.clientX-disX; ???????????var t=e.clientY-disY; ???????????if(l<=0) l=0; ???????????if(t<=0) t=0; ???????????if(l>=div1.offsetWidth-div2.offsetWidth) l=div1.offsetWidth-div2.offsetWidth; ???????????if(t>=div1.offsetHeight-div2.offsetHeight) t=div1.offsetHeight-div2.offsetHeight; ???????????div2.style.left=l+"px"; ???????????div2.style.top=t+"px"; ???????} ???????document.onmouseup=function(){ ???????????document.onmousemove=null; ???????????document.onmouseup=null; ???????} ???????return false; ???}