文件的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元素并将其放下或按ESC键，它会记录“end”。如果我从桌面上拿来一个文件，然后将其放回桌面或按ESC键或将其放下，则dragend事件不会触发，也不会记录任何内容。

- John

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>

- Kareem Kamal