<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

a, #target {
    width: 100%;
    height: 200px;
    font-size: 200px;
    white-space: nowrap;
}

#target {
    border: black 1px solid;
}

code {
    color: green;
}
</style>
<div><a id="source" href="https://www.apple.com">Hello world</a></div>
<div id="target"></div>
<div id="output"></div>
<script>
source.addEventListener("dragstart", event => logOutput("dragstart"));
source.addEventListener("dragend", event => logOutput("dragend"));
target.addEventListener("dragenter", event => event.preventDefault());
target.addEventListener("dragover", event => event.preventDefault());
target.addEventListener("drop", event => {
    target.innerHTML = "<code>PASS</code>";
    event.preventDefault();
});
function logOutput(message)
{
    if (output.innerHTML.length)
        message = ` ${message}`;
    output.insertAdjacentHTML("beforeend", `<code>${message}</code>`);
}
</script>