Update drag listeners

Author: AlttiRi

demo/App.vue

@@ -2,7 +2,7 @@
   <!-- just for tests -->
   <video src="#" style="background-color: aqua"> TEST </video>
 
-  <FileInput :state="state">
+  <FileInput :state="state" :global-drop-zone="true">
 <!--    <FileInputSelectedInfo :state="state"/>-->
   </FileInput>
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@alttiri/vue-file-input",
-  "version": "1.4.2-20240819",
+  "version": "1.5.0-20240819",
   "type": "module",
   "description": "Vue.js file input with Drag and Drop support.",
   "homepage": "https://github.com/alttiri/vue-file-input",

package.json

@@ -79,19 +79,23 @@ function initListeners() {
     return;
   }
   dropZone.value.addEventListener("dragenter", onDragEnter);
+  dropZone.value.addEventListener("dragenter", onDragOver);
+  dropZone.value.addEventListener("dragover",  onDragOver);
   dropZone.value.addEventListener("dragleave", onDragLeave);
   dropZone.value.addEventListener("drop",      onDrop);
-  dropZone.value.addEventListener("dragover",  onDragOver);
+  document.body.addEventListener("dragenter",  onDragOverNonDropZone);
   document.body.addEventListener("dragover",   onDragOverNonDropZone);
 }
 function removeListeners() {
   if (!dropZone.value) {
     return;
   }
   dropZone.value.removeEventListener("dragenter", onDragEnter);
+  dropZone.value.removeEventListener("dragenter", onDragOver);
+  dropZone.value.removeEventListener("dragover",  onDragOver);
   dropZone.value.removeEventListener("dragleave", onDragLeave);
   dropZone.value.removeEventListener("drop",      onDrop);
-  dropZone.value.removeEventListener("dragover",  onDragOver);
+  document.body.removeEventListener("dragenter",  onDragOverNonDropZone);
   document.body.removeEventListener("dragover",   onDragOverNonDropZone);
 }
 
@@ -113,6 +117,9 @@ function onDragOver(event: DragEvent) {
 }
 function onDragEnter(event: DragEvent) {
   stopEvent(event);
+  if (event.relatedTarget !== null) {
+    return;
+  }
   if (!dropHover.value) {
     dropHover.value = true;
   } else {
@@ -122,10 +129,11 @@ function onDragEnter(event: DragEvent) {
 }
 function onDragLeave(event: DragEvent) {
   stopEvent(event);
-  if (!dropZone.value?.contains(event.relatedTarget as Node)) {
-    dropHover.value = false;
-    resetDataTransferHover();
+  if (event.relatedTarget !== null) {
+    return;
   }
+  dropHover.value = false;
+  resetDataTransferHover();
 }
 
 function onDragOverNonDropZone(event: DragEvent) {