'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 |