原生js拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
   *{
      margin:0;
      padding:0;
    }
   #box{
    width:100px;
    height:100px;
    background: red;
    position: absolute;
    left:0;
    top:0;
    cursor: move;
  }
</style>
<body>
      <div id="box"></div>
</body>
</html>
<script>
     var oBox=document.getElementById('box');

     oBox.onmousedown=function(e){
            var e=e || event;
            var disX=e.offsetX;
            var disY=e.offsetY;

            var iWidth=document.documentElement.clientWidth-this.offsetWidth;
            var iHeight=document.documentElement.clientHeight-this.offsetHeight;

       document.onmousemove=function(e){
           var l=e.clientX-disX;
           var t=e.clientY-disY;

           l = l>iWidth?iWidth:(l<0?0:l);
           t = t>iHeight?iHeight:(t<0?0:t);

           oBox.style.left=l+"px";
           oBox.style.top=t+"px";
        }

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

posted @ 2018-08-18 21:26  静守己心,笑谈浮华  阅读(104)  评论(0)    收藏  举报