Drag an Element as a window-CodePudding

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 >
<div id="element" >
            <span id="header">
                <span >
                    <i ></i>
                    <i ></i>
                    <i ></i>
                </span>
            </span>
        </div>
</div>

CodePudding user response：

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 >
<div id="element" >
            <span id="header">
                <span >
                    <i ></i>
                    <i ></i>
                    <i ></i>
                </span>
            </span>
        </div>
</div>

CodePudding user response：

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 >
    <div >
        <span id="header">
            <span >
                <i ></i>
                <i ></i>
                <i ></i>
            </span>
        </span>
    </div>
    <div >
        <span id="header">
            <span >
                <i ></i>
                <i ></i>
                <i ></i>
            </span>
        </span>
    </div>
    <div >
        <span id="header">
            <span >
                <i ></i>
                <i ></i>
                <i ></i>
            </span>
        </span>
    </div>
</div>