趋向完美的“拖拽”。

 var div=document.getElementById("div1");
        div.onmousedown=function(e1){//在div上点击时执行
            //console.log(e1.clientX,e1.clientY,e1.offsetX,e1.offsetY);
            document.onmousemove=function(e2){//在文档上移动事件
                console.log(e2);
                div.style.left=e2.clientX-e1.offsetX+"px";
                //鼠标在移动中距离页面右上角的宽高   --减去
                // 在div上点击时鼠标离目标元素即div右上角的距离
                div.style.top=e2.clientY-e1.offsetY+"px";

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

            }
        } 

第二种

 var div=document.getElementById("div1");
         var x,y;
         div.addEventListener("mousedown",click);
         function click(e) {
             x=e.offsetX;
             y=e.offsetY;
             document.addEventListener("mousemove",mouseMove);
             document.addEventListener("mouseup",mouseUp);

         }
         function mouseMove(e) {
             div.style.left=e.clientX-x+"px";
             div.style.top=e.clientY-y+"px";
         }
         function mouseUp(e) {
             document.removeEventListener("mouseMove",mouseMove);
             document.removeEventListener("mouseMove",mouseUp);
         }

第三种
多个div,不设置全局变量

var div=document.querySelectorAll(".div1");
        for (let i = 0; i < div.length; i++) {
            
            div[i].addEventListener("mousedown",mouseHandler)
            
        }
        function mouseHandler(e) {
            //this是DIV的
            document.elem=this;
            document.x=e.offsetX;//给document添加x属性；
            document.y=e.offsetY;//给document添加y属性；
            document.addEventListener("mousemove",mouseMove);
            document.addEventListener("mouseup",mouseUp);
        }
        function mouseMove(e) {
            //this是document，document是对象，已经设置了x,y,elem
            this.elem.style.left=e.clientX-this.x+"px";
            this.elem.style.top=e.clientY-this.y+"px";

        }
        function mouseUp(e) {
            console.log(this);
            document.removeEventListener("mousemove",mouseMove);
            document.removeEventListener("mouseup",mouseUp);
        } 

第四种
当拖拽元素有父元素时

var div = document.querySelectorAll(".div1");
        for (let i = 0; i < div.length; i++) {
            div[i].addEventListener("mousedown", mouseHandler)
        }

        function mouseHandler(e) {
            switch (e.type) {
                case "mousedown":
                    e.preventDefault();
                    document.elem=this;
                    document.x=e.offsetX;
                    document.y=e.offsetY;
                    document.addEventListener("mousemove",mouseHandler);
                    document.addEventListener("mouseup",mouseHandler);
                    break;
                case "mousemove":
                    var rect=this.elem.parentElement.getBoundingClientRect();//获取父元素的位置，比如宽高
                    this.elem.style.left=e.clientX-rect.x-this.x+"px";
                    console.log(rect,this.elem.offsetWidth);
                    this.elem.style.top=e.clientY-rect.y-this.y+"px";
                    if (this.elem.offsetLeft<0)  this.elem.style.left="0px";
                    if (this.elem.offsetTop<0)  this.elem.style.top="0px";
                    //offsetLeft offsetTop,等同于定位的left和top，如果没有定位，向上寻找到定位的父容器位置
                    //从左上角的位置(从父容器的padding开始)开始算，如果没找到就相对页面定位
                    if (this.elem.offsetLeft>rect.width-this.elem.offsetWidth)  this.elem.style.left=rect.width-this.elem.offsetWidth+"px";
                    // offsetWidth=width+padding+border
                    if (this.elem.offsetTop>rect.height-this.elem.offsetHeight)  this.elem.style.top=rect.width-this.elem.offsetWidth+"px";


                    break;
                case "mouseup":
                   this.removeEventListener("mousemove",mouseHandler);
                   this.removeEventListener("mouseup",mouseHandler);


                    break;
            }
        }

html

<div class="divs">
        <div class="div0">
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
        </div>
    </div>