为什么“@drop”事件在vue中对我不起作用？
为什么“@drop”事件在vue中对我不起作用？
提问于 2020-07-24 05:22:02
@drop监听器对我不起作用。它不会调用我告诉它调用的方法。
我希望拖动芯片并能够将其放到另一个组件上，然后执行一个功能，但在放置芯片时，不会执行dropLink方法，因此我假定不会发出@drop事件。
控制台上未显示任何错误。
其余的事件运行得很好，比如@dragstart。
这是我使用的组件的代码：
<template>
<div
@keydown="preventKey"
@drop="dropLink"
>
<template
v-if="!article.isIndex"
>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-chip
small
draggable
class="float-left mt-2"
v-on="on"
@dragstart="dragChipToLinkToAnotherElement"
>
<v-icon x-small>
mdi-vector-link
</v-icon>
</v-chip>
</template>
<span>Link</span>
</v-tooltip>
<v-chip-group
class="mb-n2"
show-arrows
>
<v-chip
v-for="(lk, index) in links"
:key="index"
small
outlined
:class="{'ml-auto': index === 0}"
>
{{ lk.text }}
</v-chip>
</v-chip-group>
</template>
<div
:id="article.id"
spellcheck="false"
@mouseup="mouseUp($event, article)"
v-html="article.con"
/>
</div>
</template>
<script>
export default {
name: 'ItemArticle',
props: {
article: {
type: Object,
required: true
}
},
computed: {
links () {
return this.article.links
}
},
methods: {
mouseUp (event, article) {
this.$emit('mouseUp', { event, article })
},
preventKey (keydown) {
this.$emit('preventKey', keydown)
},
dragChipToLinkToAnotherElement (event) {
event.dataTransfer.setData('text/plain', this.article.id)
},
dropLink (e) {
//but this method is never called
console.log('evento drop is ok', e)
}
}
}
</script>在这个项目中，我也在使用Nuxt，以防万一。
回答 1
Stack Overflow用户
发布于 2020-07-24 12:16:55
为了使div成为拖放目标，div's dragenter and dragover events must be canceled。您可以使用.prevent event modifier对这些事件调用Event.preventDefault()
<div @drop="dropLink" @dragenter.prevent @dragover.prevent></div>如果需要根据拖动数据类型接受/拒绝删除，请设置一个有条件地调用Event.preventDefault()的处理程序
<div @drop="dropLink" @dragenter="checkDrop" @dragover="checkDrop"></div>export default {
methods: {
checkDrop(e) {
if (/* allowed data type */) {
e.preventDefault()
}
},
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63063312
复制相关文章
相似问题
腾讯云开发者
