js拖拽不出指定对象

Posted 2020-11-19 zard23

css如下

#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;}

 

html如下

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

 

 

javascript如下

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;
    }