Estoy trabajando en una aplicación web de arrastrar y soltar usando Vue.JS y Vuex Store. La funcionalidad se implementa más o menos siguiendo los documentos mdn para "HTML Drag and Drop API" . Por lo tanto, mi componente Dropzone y los componentes de elementos arrastrables funcionan con event.preventDefault(). Como he anidado Dropzones, también uso event.stopPropagation() en Dropzones. Arrastrar y soltar con los componentes designados funciona bien.

Ilustración de zonas de caída anidadas

Mi problema es: cuando un usuario suelta un elemento arrastrable fuera de una zona de caída, la interfaz de usuario se rompe. Entonces, lo que estoy buscando es un detector de eventos en toda la aplicación para caídas en áreas de zona de caída no válidas.

Lo probé con un oyente global "dragend", pero parece que no funciona. También probé "mouseup", pero eso parece general. Esto es lo que probé:

 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');

Espero que alguien sepa cómo implementar un EventListener en toda la aplicación que se active después de caídas fallidas.