The @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 以防相关。
为了使div
一个下降目标,div's dragenter and dragover活动必须取消 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets。火狐也需要drop活动被取消 https://stackoverflow.com/questions/14541775/html5-drag-and-drop-firefox-is-being-redirected.
您可以调用Event.preventDefault() https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault关于这些事件.prevent
事件修饰符 https://vuejs.org/guide/essentials/event-handling.html#event-modifiers:
<div @drop.prevent="dropLink" @dragenter.prevent @dragover.prevent></div>
如果您需要根据拖动数据类型接受/拒绝拖放,请设置一个有条件调用的处理程序Event.preventDefault()
:
<div @drop.prevent="dropLink" @dragenter="checkDrop" @dragover="checkDrop"></div>
export default {
methods: {
checkDrop(e) {
if (/* allowed data type */) {
e.preventDefault()
}
},
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)