js原生不设置absolute拖拽

<meta charset="UTF-8">

    <title>Title</title>

<div class="test1">a</div>
<div class="test2">b</div>
<div class="test3">c</div>
<div class="test1">a</div>
<div class="test2">b</div>
<div class="test3">c</div>
<div class="test1">a</div>
<div class="test2">b</div>
<div class="test3">c</div>
<div class="test1">a</div>
<div class="test2">b</div>
<div class="test3">c</div>
<div class="test1">a</div>
<div class="test2">b</div>
<div class="test3">c</div>
<div class="test1">a</div>
<div class="test2">b</div>
<div class="test3">c</div>
<div class="test1">a</div>
<div class="test2">b</div>
<div class="test3">c</div>
<div class="test1">a</div>
<div class="test2">b</div>
<div class="test3">c</div>
<div class="test1">a</div>
<div class="test2">b</div>
<div class="test3">c</div>

<script>
    let maxX = document.documentElement.getBoundingClientRect().width; //X轴可移动最大距离（页面宽度）

    let maxY = document.documentElement.getBoundingClientRect().height; //Y轴可移动最大距离（页面高度）

    let x, y, bx, by; //元素坐标

    let bool = false; //元素移动开关，false代表已松开鼠标按键

    let docu = document.getElementsByTagName('div'); //获取div

    let docuLen = docu.length; //dom长度

    for (var i = 0; i < docuLen; i++) {
        test(docu[i])
    }
  
  


    function test(doc) {

        let docLeft = doc.getBoundingClientRect().left; //元素距离页面左边的距离

        let docWidth = doc.offsetWidth; //元素宽度包括border

        let docTop = doc.getBoundingClientRect().top; //元素距离页面顶部的距离

        let docBottom = doc.offsetHeight; //元素高度包括border

        //1、元素距离左侧页面的距离加上当前元素的宽度 (docLeft + docWidth)

        //2、页面宽度减去当前元素距页面左侧距离和当前元素的宽度

        let rightMax = maxX - (docLeft + docWidth); //右移最大距离

        //1、元素距离页面顶部的距离加上当前元素的高度 (docTop + docBottom)

        //2、页面高度减去当前元素顶部距离和当前元素的高度

        let bottomMax = maxY - (docTop + docBottom); //移动到底部的最大距离

        doc.onmousedown = function (e) {

            bx = doc.getBoundingClientRect().left; //当前点击元素距离左侧页面的距离

            by = doc.getBoundingClientRect().top; //当前点击元素距离顶部页面的距离

            x = e.clientX - bx; //鼠标在元素内点击的坐标

            y = e.clientY - by; //鼠标在元素内点击的坐标

            bool = true; //元素移动开关

            for (let i = 0; i < docuLen; i++) {

                docu[i].style.zIndex = '1'; //所有元素层叠顺序置1

            }

            doc.style.zIndex = '100'; //当前点击元素层叠顺序高于其它元素

            document.onmousemove = function (e) {

                if (bool === true) {

                    let moveX = e.clientX - x - docLeft; //计算X轴移动的位置

                    let moveY = e.clientY - y - docTop; //计算Y轴移动的位置

                    //左移动

                    if (moveX <= -docLeft) {

                        moveX = -docLeft

                    }

                    //右移动
                    else if (moveX >= rightMax) {

                        moveX = rightMax;

                    }

                    // 上移动

                    if (moveY <= -20) {

                        moveY = -20;

                    }

                    // 下移动
                    else if (moveY >= bottomMax) {

                        moveY = bottomMax;

                    }

                    // 移动的位置

                    doc.style.transform = `translate(${moveX}px,${moveY}px)`;

                } else {

                    return false;

                }

            };

            //松开鼠标按键

            document.onmouseup = function () {

                bool = false;

            }

        };

    }
</script>