drag-and-drop - svelte on drop 事件没有被调用

标签 drag-and-drop svelte

我知道这一定是非常明显的事情,但我不明白。我有两个 div,一个可拖动,另一个带有 on:drop,当我将可拖动的 div 放到它上面时,它似乎没有被调用。我错过了什么?

回复: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>

最佳答案

看起来 dragover 事件需要一个 preventdefault;

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

关于drag-and-drop - svelte on drop 事件没有被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66719957/

相关文章:

c# - ListBox多选拖放问题

java - 拖动时禁用 TreeNode Selection

javascript - 拖放和交换工作不顺利

typescript - 无法使用 TypeScript 将 prop 传递给 svelte 中的组件

sendgrid - 提交表单后通过 SendGrid 发送电子邮件

javascript - 将列表项拖到新的相对位置并保存到数据库

ios - ipad:将一个 UITableViewCell 从一个 UITableViewController 拖放到另一个 UITableViewController 中

typescript - 鼠标滚轮功能在 svelte 上返回错误

svelte-i18n - Svelte Rollup 编译器警告 : `this` has been rewritten to `undefined`

javascript - 在 Svelte 中获取对组件根元素的引用