鼠标拖动小方块在框里面移动

效果图：

<style>
        *{
            margin:0px;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 500px;
            border:5px solid red; 
            margin: 30px;
            position: relative;
        }
        .mark{
            width: 50px;
            height: 50px;
            background-color: blueviolet;
            position: absolute;
        }
    </style>

<div class='box'>
        <div class="mark"></div>
    </div>

<script>
       //获取操作对象
       var box=document.querySelector(".box")
       var mark=document.querySelector(".mark")

       //给mark小盒子对象绑定事件
       mark.onmousedown=function(e){
            //绑定鼠标移动事件
            document.onmousemove=function(e){
                var e = e || window.event
                //获取当前小盒子的移动距离
                var t2=e.pageY-box.offsetTop-parseInt(mark.offsetHeight/2)
                var l2=e.pageX-box.offsetLeft-parseInt(mark.offsetWidth/2)

                //判断小盒子在大盒子中的移动范围
                var left1=box.clientWidth-mark.clientWidth
                var top1=box.clientHeight-mark.clientHeight

                //水平方向
                if(l2<=0){
                    mark.style.left='0px'
                }else if(l2>=left1){
                    mark.style.left=left1+'px'
                }else{
                    mark.style.left=l2+'px'
                }

                //垂直方向
                if(t2<=0){
                    mark.style.top='0px'
                }else if(t2>=top1){
                    mark.style.top=top1+'px'
                }else{
                    mark.style.top=t2+"px"
                }
            }

            document.onmouseup=function(){
                document.onmousemove=null
            }
       }
    </script>