파일에 대해 DragEnd 이벤트가 발생하지 않음

파일에 대해 DragEnd 이벤트가 발생하지 않음

내 템플릿:

<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이벤트는 발화하지 않고 아무것도 기록하지 않습니다.

나는 아마 몇 년 늦었지만 아마 다른 누군가가 이것을 유용하게 여길 것이다.

드래그 스타트 및 드래그 엔드 이벤트는 OS에서 브라우저로 파일을 드래그할 때 실행되지 않습니다.

원천

따라서 드래그 엔드 이벤트는 작동하지 않지만 다른 해결 방법이 있습니다. 드래그 오버 이벤트는 빠르게 실행되므로 오버레이가 다음과 같이 1초 동안 작동을 멈추면 오버레이를 지우기 위한 타임아웃을 설정할 수 있습니다.

<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>

언급URL : https://stackoverflow.com/questions/45321675/dragend-event-not-fired-for-files