I’m working on a drag and drop web application using Vue.JS and Vuex Store. The functionality is implemented pretty much following the mdn docs for “HTML Drag and Drop API”. So my Dropzone Component and Draggable Element Components work with event.preventDefault(). As I have nested Dropzones, I also use event.stopPropagation() on the Dropzones. Drag and drop with the designated compoents works fine.

Nested dropzones illustration

My problem is: When a user drops a Draggable Element outside of a Dropzone, the UI kind of breaks. So what I’m looking for is a app-wide event Listener for drops in non-valid dropzone areas.

I tried it with a global “dragend” listener, but that doesn’t seem to work. I also tried “mouseup”, but that seems to general. Here’s what I tried:

new Vue({
    router,
    store,
    render: (h) => h(App),
    async created() {
        window.document.addEventListener('dragend', (e) => {
            console.log("global Dragend -------------- ");
        })

        window.document.addEventListener('mouseup', (e) => {
            console.log("global Mouseup -------------- ");
        })
    },
}).$mount('#app');

I'm hoping that somebody knows how to implement an app-wide EventListener that triggers after failed drops.