js原生拖拽功能

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

</div>

   *{
    margin:0;
    padding:0;
    }
    .main{
    width:200px;
    height:200px;
  
   position:absolute;
   left:40px;
   top:40px;
    border:1px solid red;
    }
    .box{
        width:100%;
        height:40px;
        background-color:green;
    }

 var btn=document.getElementsByClassName("main")[0];
    var box=document.getElementsByClassName("box")[0];
    box.οnmοusedοwn=function(event){ //鼠标点下触发
    var e=event||window.event;
    var x=e.clientX-btn.offsetLeft;//获取点击那个点离body的左边距离clientX-offsetLeft本身离body的距离
    var y=e.clientY-btn.offsetTop;//获取点击那个点离body的上边距离clientX-offsetLeft本身离body的距离
    document.οnmοusemοve=function(event){
        var e=event||window.event;
        btn.style.left=e.clientX-x+"px";//获取偏移量
        btn.style.top=e.clientY-y+"px";;//获取偏移量


    }


    }
    box.οnmοuseup=function(){//鼠标松掉时触发
       document.οnmοusemοve=null;
    }