2021-07-22

ファイルをドロップする要素が子要素を持っていると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

たむたむの日記

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

参考