未针对文件触发 DragEnd 事件

Question

我的模板：

<div class="upload-component" @dragend="log('end')" @dragenter="dragEntered" @drop.prevent @dragover.prevent>
    <div class="zone" @drop="dropped">
        
    </div>
    <p draggable="true">drag me</p>
</div>

我的js：

export default {
        name: 'UploadComponent',
        methods: {
            log(str){
                console.log(str)
            },
            dragEntered(e){
                // change some styles
            },
            dropped(e){
                console.log(e.dataTransfer.files)
            }
        }
    }

问题：
如果我拖动 P 元素并将其放下或单击转义键，它将记录“结束”。如果我从桌面上获取一个文件并将其放回桌面或按转义键或将其删除，则该dragend事件不会触发，也不会记录任何内容

Answer 1

我可能晚了几年，但也许其他人会发现这很有用。

请注意，将文件从操作系统拖到浏览器中时，不会触发dragstart 和dragend 事件。

来源

因此，dragend 事件不起作用，但还有另一种解决方案，dragover 事件会快速触发，因此您可以设置一个超时，以便在它停止触发一秒钟时清除覆盖层，如下所示：

<template>
  <div class="advice-documents">
    <div
      v-if="isDragOverlayVisible"
      class="advice-documents__drop-zone"
    >
      <span>drop file to upload</span>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    isDragOverlayVisible: false,
    dragOverTimeout: undefined,
  }),

  created() {
    document.addEventListener('dragover', this.handleDragover)
    document.addEventListener('drop', this.handleDrop)
  },

  beforeDestroy() {
    document.removeEventListener('dragover', this.handleDragover)
    document.removeEventListener('drop', this.handleDrop)
  },

  methods: {
    handleDrop(event) {
      event.preventDefault()
      this.isDragOverlayVisible = false
    },

    handleDragover(event) {
      event.preventDefault()
      this.isDragOverlayVisible = true
      console.log('dragover')
      clearTimeout(this.dragOverTimeout)
      this.dragOverTimeout = setTimeout(() => {
        this.isDragOverlayVisible = false
      }, 1000)
    },
  },
}
</script>

<style>
.advice-documents__drop-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  color: var(--aab-light-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8vmin;
  z-index: 1;
}
</style>