• HTML
• CSS
• JS

HTML

<section class="container">
    <div class="box">
        <div class="image" draggable="true"></div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</section>

CSS

.container{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    width:420px;
    justify-content:center;
}
body{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f6f7fb;
}
.container .box{
    position:relative;
    height:160px;
    width:160px;
    border-radius:12px;
    border:2px solid #333;
}
.box .image{
    height:100%;
    width:100%;
    border-radius:12px;
    background-size:cover;
    background-position:center;
    background-image:url("img.jpg");
}
.box.hovered{
    border:2px dashed #333;
}

JS

//DOM Elements
const boxes = document.querySelectorAll(".box"),
    image = document.querySelector(".image");
    
//Loop through each boxes element
boxes.forEach(box => {
    //When a draggable element dragged over a box element
    box.addEventListener("dragover", e => {
        e.preventDefault(); //Prevent default behaviour
        box.classList.add("hovered");
    });
    
    //When a draggable element leaves box element
    box.addEventListener("dragleave", () => {
        box.classList.remove("hovered");
    })
    
    //When a draggable element is dropped on a box elemen
    box.addEventListener("drop", () => {
        box.appendChild(image);
    })
});

/* All the credits: https://www.youtube.com/watch?v=vJn5_SytV_U */