Как сделать перетаскиваемый множественный тег html с фактической точкой, используя javascript, а не каждый тег оставляя свойство

Question

Первая концепция, которую я хотел

На самом деле перетаскиваемый объект, который я не хотел, мне нужен каждый html блок без абсолютной позиции, потому что, когда я установил для мобильного устройства, он создаст горизонтальную полосу прокрутки , Если у вас есть идеи с идеями абсолютной позиции с отзывчивостью, дайте мне знать, пожалуйста.

Вторая концепция, которую я хотел , когда я делаю onmousedown на коробке, похоже, что коробка выглядит как не начиная с того, что я сделал в первом квартале. Мне нужно это исправить. Я видел много идей, но они слишком сложны для понимания.

Пожалуйста, взгляните на мой фрагмент, который мне нужен для реализации вышеуказанной концепции.

 let  box = document.querySelectorAll('.box');
        box.forEach((i)=> {
            i.onmousedown = boxDown;
          
        })
    
        var own = '';
        function boxDown(){
           
             own = this;
            document.onmousemove = boxMove;
        }

        function boxMove(e){
           let x = e.clientX;
           let y = e.clientY;

           own.setAttribute('style', `top: ${y}px; left: ${x}px`);
           this.onmouseup = boxRemove;
           function boxRemove(){
               this.onmousemove = null;
           }
        }

 .box{
        width: 10rem;
        height: 10rem;
        background: red;
        position: absolute;
        top: 10rem;
        cursor: move;
    }
    .box:nth-child(2){
        left: 12rem;
    }
    .box:nth-child(3){
        left: 24rem;
    }
    .box:nth-child(4){
        left: 36rem;
    }
    .box:nth-child(5){
        left: 48rem;
    }

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