可拖拽的正方体

直接上代码

样式：

.box{ 
     width: 100px;
     height: 100px;
     background: #000000;
     cursor: move;
     position: absolute;
 }

html

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

js

var box=document.querySelector('.box');
    var maxL=document.documentElement.clientWidth-box.offsetWidth;
    var maxT=document.documentElement.clientHeight-box.offsetHeight;
    console.log(maxL);
    console.log(maxT);
    box.onmousedown=function (ev) {
        var event=ev||window.event;
        var x=event.offsetX;
        var y=event.offsetY;
        console.log(x);
        console.log(y)
        document.onmousemove=function (ev) {
            var event=ev||window.event;
            var l=event.clientX-x;
            var t=event.clientY-y;
            if(l>=maxL){
                l=maxL
            }else if(l<=0){
                l=0
            }
            if(t>=maxT){
                t=maxT
            }else if(t<=0){
                t=0;
            }
            console.log(l);
            console.log(t);
            box.style.left=l+'px';
            box.style.top=t+'px';
        }
    }
    box.onmouseup=function () {
        document.onmousemove=null;
    }