SOURCE

window.onload = () => {
    let dragged;

    let area = document.querySelector('body');
    area.addEventListener("dragstart", (event) => {
        dragged = event.target
    }, false);

    area.addEventListener("dragover", (event) => {
        event.preventDefault();
    }, false);

    area.addEventListener("drop", function (event) {
        // prevent default action (open as link for some elements)
        event.preventDefault()
        if (event.target.className == "class1") {
            dragged.parentNode.removeChild(dragged)
            event.target.appendChild(dragged)
        }
    }, false)
}

<div class="class1">
	<div class="class2" draggable="true"></div>
</div>
<div class="class1"></div>
<div class="class1"></div>

.class1 {
    width: 300px;
    height: 150px;
    background: purple;
    margin: 20px 0;
}
.class2 {
    width: 100px;
    height: 100px;
    background: white;
}