• HTML
• CSS
• JS

HTML

<div class="wrapper">
    <header><span class="close">×</span></header>
    <div class="content">
        <h3>Arrastable Div</h3>
        <p>Este es un div arrastrable fue creado utilizando HTML CSS y Javascript. Puede mover este div a cualquier parte del documento o página.</p>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
}
body{
    background:#17202a;
}
.wrapper{
    top:50%;
    left:50%;
    width:450px;
    background:#fff;
    position:absolute;
    border-radius:10px;
    transform:translate(-50%,-50%) scale(1);
}
.wrapper header{
    background:#f39c12;
    color:#fff;
    padding:20px 10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    cursor:move;
}
.wrapper header span{
    position:absolute;
    top:2px;
    right:10px;
    font-size:25px;
    cursor:pointer;
}
.wrapper .content{
    text-align:center;
    margin:20px;
}
.wrapper .content h3{
    margin-bottom:10px;
}

JS

const wrapper  = document.querySelector(".wrapper"),
        header = wrapper.querySelector("header");
const close    = document.querySelector(".close");

function onDrag({movementX,movementY}){
    
    let getStyle = window.getComputedStyle(wrapper);
    let left     = parseInt(getStyle.left);
    let top      = parseInt(getStyle.top);     
    
    wrapper.style.left = `${left + movementX}px`;
    wrapper.style.top = `${top + movementY}px`;

}

header.addEventListener("mousedown",() =>{
    header.classList.add("active");
    header.addEventListener("mousemove",onDrag);
});

document.addEventListener("mouseup",()=>{
    header.classList.remove("active");
    header.removeEventListener("mousemove",onDrag);
});

close.addEventListener("click",()=>{
    wrapper.remove();  
});