首页 > 代码库 > js 拖拽

js 拖拽

2024-09-04 19:38:01   224人阅读

<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; position:absolute; background:red;}
</style>
</head>
<script>
window.onload=function(){
    var oDiv=document.getElementById(‘div1‘);
    var disX=0;
    var disY=0;
    oDiv.onmousedown=function(ev){
            var oEvent=ev || event;
            disX=oEvent.clientX-oDiv.offsetLeft;
            disY=oEvent.clientY-oDiv.offsetTop;
            document.onmousemove=function(ev){
                var oEvent=ev || event;
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
                if(l<0){
                    l=0;
                    }
                    else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
                    {
                        l=document.documentElement.clientWidth-oDiv.offsetWidth;
                    }
                if(t<0){
                    t=0;
                    }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
                    {
                        t=document.documentElement.clientHeight-oDiv.offsetHeight;
                    }
                oDiv.style.left=l+‘px‘;
                oDiv.style.top=t+‘px‘;
                
                }
                    document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
        }
        
    }
</script>

<body>
<div id="div1"></div>
</body>
</html>

 

js 拖拽


联系
我们