ファイルをドロップする要素が子要素を持っているとDragLeaveが発生してしまう

  • このエントリーをはてなブックマークに追加

Drag and Dropを実装する時に、ドロップする要素が子要素を持っていると、DragLeaveが発生してしまう。
子要素(別要素)にEnterしたということは、対象の要素がLeaveしたということになるらしいです。

対策の方法は色々とありますが、カウンタを用意するのが一番簡単です。
ひとまず、Vue3+CompositionAPIでサンプルを。

template
<div :class="{enter: ddCounter>0}"
@dragenter="fileDragEnter"
@dragleave="fileDragLeave"
@dragover.prevent
@drop.prevent="fileDrop"
>
</div>
script
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const ddCounter = ref(0)
const fileDragEnter = () => { ddCounter.value++ }
const fileDragLeave = () => { ddCounter.value-- }
const fileDrop = (event) => {
ddCounter.value = 0
}
return {
ddCounter,
fileDragEnter,
fileDragLeave,
fileDrop,
}
}
})
style
.enter {
border: 5px dotted powderblue;
}

サンプルコード ▶ Vue SFC Playground

参考