Неправильно работает drag & drop в vanile js

let start = document.querySelector(".main__btn"), 
    game = document.querySelector(".container"); 
 
start.addEventListener("click",startGame); 
 
function startGame(){ 
    renderBox(); 
} 
function renderBox(){ 
    game.innerHTML = ""; // удаляем дивы  
    let box = document.createElement("div"); 
    let boxSize = getRandom(30,500); 
    let gameSize = game.getBoundingClientRect(); 
    let maxTop = gameSize.height - boxSize; 
    let maxLeft = gameSize.width - boxSize; 
 
    //drag&drop 
    let startCursorX, 
        startCursorY,  
        startX, 
        startY; 
    box.addEventListener("dragstart",function(e) { 
        startCursorX = e.pageX;//Начальная позиция курсора по оси X 
        startCursorY = e.pageY;//Начальная позиция курсора по оси Y 
        startX = box.style.marginLeft.replace("px","")*1;// Нам нужны только цыфры без PX 
        startY = box.style.marginTop.replace("px","")*1; 
    }); 
    document.addEventListener("drag",function(e){ 
        box.style.marginLeft = ((e.pageX - startCursorX)) + "px"; 
        box.style.marginTop = ((e.pageY - startCursorY)) + "px"; 
    }); 
    box.addEventListener("dragend",function(e) { 
        box.style.position = "absolute"; 
        box.style.marginLeft = startX + e.pageX- startCursorX + "px";//позиция элемента + позиция курсора - позиция курсоа в начале перетаскивания 
        box.style.marginTop = startY + e.pageY- startCursorY+ "px"; 
    }); 
 
     
 
 
 
 
 
    box.style.height = boxSize + "px"; 
    box.style.width = boxSize + "px"; 
    box.style.top = getRandom(0,maxTop) + "px"; 
    box.style.left = getRandom(0,maxLeft) + "px"; 
    box.style.backgroundColor = getRandomColor(); 
    box.style.cursor = "pointer"; 
    box.draggable = true;  
    game.style.position = "relative"; 
 
    game.insertAdjacentElement("afterbegin",box); 
 
} 
function getRandomColor(){ 
    return "#" + Math.floor(Math.random() * 16777215).toString(16); 
} 
function getRandom(min,max) { 
    return Math.floor(Math.random() * (max - min) + min); 
} 
function getCoords(elem) { 
    let box = elem.getBoundingClientRect(); 
 
    return { 
        top: box.top + pageYOffset, 
        left: box.left + pageXOffset 
    } 
}

.container{ 
    margin: auto; 
    width: 700px; 
    height: 700px; 
    border: solid 2px red; 
    border-radius: 15px; 
    position: relative; 
} 
.main__btn{ 
    cursor: pointer; 
    margin: auto; 
    width: 100px; 
    height: 30px; 
    background-color: transparent; 
    border: none; 
    border: solid 1px black; 
    border-radius: 10px; 
}

    <div class="container"> 
 
         
 
         
    </div> 
    <button class="main__btn">запуск</button>