2025-03-23

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图解拖拽效果</title>
    <style>
        #box{
            height: 400px;
            width: 300px;
            position: absolute;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
      <div id="box"></div>
      <script>
        let box=document.getElementById("box")
        box.onmousedown=function(e){
            let ox=e.offsetX
            let oy=e.offsetY

            document.onmousemove=function(e2){
                let cx=e2.clientX
                let cy=e2.clientY

                let _left=e2.clientX-e.offsetX
                let _top=e2.clientY-e.offsetY

                if(_top<0){
                   _top=0
                }
                if(_left<0){
                   _left=0
                }
                if(_left>document.documentElement.clientWidth-box.offsetWidth){
                   _left= document.documentElement.clientWidth-box.offsetWidth
                }
                if(_top>document.documentElement.clientHeight-box.offsetHeight){
                   _top= document.documentElement.clientHeight-box.offsetHeight
                }

                box.style.left=_left+"px"
                box.style.top=_top+"px"

                document.onmouseup=function(){
                    document.onmousemove=null
                }


            }
        }
      </script>
    
</body>
</html>