为啥 '@drop' 事件在 vue 中对我不起作用？

Posted 2023-05-08

【中文标题】为啥 \'@drop\' 事件在 vue 中对我不起作用？

【英文标题】：Why doesn't the '@drop' event work for me in vue?为什么 '@drop' 事件在 vue 中对我不起作用？

【发布时间】：2020-11-13 17:08:19

【问题描述】：

@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】：

为了使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()
      
    ,
  

demo

【讨论】：

非常感谢您的帮助。我试过你的代码，它在 google chrome 和 microsoft edge 中正常工作，但在 Firefox 中它不起作用，当我将组件放在 div 上时，它会将我重定向到 ip 0.0.0.1，我尝试了几台计算机，但它仍然给出相同的结果（在 Firefox 中）。我希望您可以在 Firefox 中测试答案并告诉我它是否给您同样的错误。再次感谢。

使用@drop.prevent="dropLink"。见***.com/questions/14541775/…