<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body, html {
        margin: 0;
        width: 100%;
        height: 100%;
        font-family: -apple-system;
    }

    body {
        margin: 0;
    }

    #source, #destination {
        width: 200px;
        height: 200px;
        box-sizing: border-box;
        border: 1px gray solid;
    }

    #item {
        width: 100%;
        height: 100%;
        background-color: red;
    }
</style>

<body>
<div id="source">
<div draggable="true" id="item"></div>
</div>
<div id="destination"></div>
<div id="description">
    <div>To manually test, drag and drop the red square in the top container into the bottom container.</div>
    <div>Upon drop, the square should turn green and show "PASS" as text.</div>
</div>
</body>

<script>
item.addEventListener("dragstart", event => event.dataTransfer.setData("text/plain", item.id));
destination.addEventListener("dragenter", event => event.preventDefault());
destination.addEventListener("dragover", event => event.preventDefault());
destination.addEventListener("drop", event => {
    let identifier = event.dataTransfer.getData("text/plain");
    let sourceItem = document.getElementById(identifier);
    if (!sourceItem)
        return;

    sourceItem.style.backgroundColor = "green";
    sourceItem.style.color = "white";
    sourceItem.innerHTML = "<code>PASS</code>";
    destination.appendChild(sourceItem);
    event.preventDefault();
});
</script>