Drag an Element as a window

Question

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 1

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>

Answer 2

What you want to do first is detect mousedown on the green header and save the coordinates in a variable. Once you detect mousemove and downCoords is not null, you can change the .style.left and .style.top based upon the moved mouse position. Lastly, when you unclick (mouseup), it should set the coords to null so the element stops moving.

window.addEventListener("DOMContentLoaded", init);

let divElement, spnHeader;
let downCoords = null;

function init() {
    divElement = document.getElementById("element");
    spnHeader = document.getElementById("header");
    let r = divElement.getBoundingClientRect();
    
    spnHeader.addEventListener("mousedown", (e) => {
        r = divElement.getBoundingClientRect();
        if (e.button === 0) downCoords = [e.clientX, e.clientY];
    });
    window.addEventListener("mousemove", (e) => {
        if (downCoords !== null) {
            const [movedX, movedY] = [e.clientX - downCoords[0], e.clientY - downCoords[1]];
            divElement.style.left = (movedX + r.x) + "px";
            divElement.style.top = (movedY + r.y - 200) + "px"; // -200 due to CSS margin
        }
    });
    window.addEventListener("mouseup", () => downCoords = null);
}

* {
    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>