'svelte on drop event not getting called

I know this has to be something blindingly obvious but I'm not getting it. I have two divs, one draggable and the other with an on:drop which doesn't seem to be getting called when I drop the draggable div onto it. What am I missing?

REPL: https://svelte.dev/repl/8846d8b9674d42ae86a410dbb737fb79?version=3.35.0

<script>

</script>

<div on:drop={ () => {console.log( "drop" )} } >drop on me</div>

<div class="drag" draggable={true}>drag me</div>

<style>
    div {
        padding: 20px;
        margin: 10px;
        background: #fee;
    }
    .drag {
        cursor:grab;
        background: #efe;
    }
</style>



Solution 1:[1]

Looks like dragover event needs a preventdefault;

<div 
    on:drop={ () => {console.log( "drop" )} } 
    on:dragover={(ev) => { ev.preventDefault() }}
>drop on me</div>

Solution 2:[2]

with on:dragenter I had to provide ondragover="return false".

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kim Aldis
Solution 2 dr jerry