Drag an Element as a window

I have an element that contains a couple of elements and I want that while clicking on the green header of the element it will be dragged with the mouse movement and it will stay in the last position(it’s a simulation for a windows window).

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    overflow: hidden;
}
.container {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.box {
    position: absolute;
    background-color: #000;
    width: 475px;
    height: 350px;
    border: solid 1px rgb(0, 255, 0);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#header {
    position: absolute;
    height: 20px;
    width: calc(100% + 2px);
    transform: translateX(-1px);
    top: -20px;
    background-color: rgb(0, 255, 0);
}
.back-chiffre {
    background: #000 url(/De4G.gif);
    margin-top: 200px;
    margin-right: 100px;
}

 <div class="container">
<div id="element" class="box back-chiffre">
            <span id="header">
                <span class="right">
                    <i class="fa-solid fa-window-minimize"></i>
                    <i class="fa-solid fa-window-restore"></i>
                    <i class="fa-solid fa-xmark"></i>
                </span>
            </span>
        </div>
</div>

Answer

Since @User have described it properly i am not going to describe again there is a handy function for the dragable window simulation i have created you can use it easily without going any deep or if you wanted to know you can go through codes as well

function makeItMovable(){
    let all = Array.from(arguments),
        activeClass = "active_window"
    all.forEach(el=>{
        const header = el.querySelector("#header")
        const rootEl = el.closest(".container")
        let activeEl = null

        el.addEventListener("mousedown",() => {
            all.forEach(each=>each.classList.remove(activeClass))
            el.classList.add(activeClass)
        })
        header.addEventListener("mousedown",(e)=>{activeEl = e})
        document.addEventListener("mouseup",()=>{activeEl = null})
        rootEl.addEventListener("mousemove",e=>{
            if(activeEl){  
                const el = activeEl.target.closest(".box")
                setPos(e.clientX,e.clientY,el)
            }  
        })
        function setPos(x,y,el){
            x -= activeEl.layerX
            y += activeEl.layerY
            let newStyle = `left:${x}px !important; top:${y}px !important;`
            el.setAttribute("style",newStyle)
        }          
    })
}

// example use
window.onload = () => {
    const boxes = document.querySelectorAll(".box")
    makeItMovable(...boxes)
}

@import url("./core-utils.css");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    overflow: hidden;
}
.container {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.box {
    position: absolute;
    background-color: #000;
    width: 475px;
    height: 350px;
    border: solid 1px rgb(0, 255, 0);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    user-select: none !important;
}
.active_window #header {
    background-color: rgb(0, 255, 0);
}
#header {
    position: absolute;
    height: 20px;
    width: calc(100% + 2px);
    transform: translateX(-1px);
    top: -20px;
    background-color: rgb(122, 245, 122);
}
.back-chiffre {
    background: #000 url(/De4G.gif);
    /* margin-top: 200px;
    margin-right: 100px; */
}
.active_window {
    z-index: 999;
    box-shadow: 3px 0px 10px 2px black;
  }

<div class="container">
    <div class="box back-chiffre">
        <span id="header">
            <span class="right">
                <i class="fa-solid fa-window-minimize"></i>
                <i class="fa-solid fa-window-restore"></i>
                <i class="fa-solid fa-xmark"></i>
            </span>
        </span>
    </div>
    <div class="box back-chiffre">
        <span id="header">
            <span class="right">
                <i class="fa-solid fa-window-minimize"></i>
                <i class="fa-solid fa-window-restore"></i>
                <i class="fa-solid fa-xmark"></i>
            </span>
        </span>
    </div>
    <div class="box back-chiffre">
        <span id="header">
            <span class="right">
                <i class="fa-solid fa-window-minimize"></i>
                <i class="fa-solid fa-window-restore"></i>
                <i class="fa-solid fa-xmark"></i>
            </span>
        </span>
    </div>
</div>