Fix for dragover event not getting preventDefault called on it when d…

…ebounced to ensure the drop event fires

README.md

@@ -160,6 +160,14 @@ function onDragStart(domEl: HTMLElement, dragEvent: DragEvent, dragOptions: Drag
 
 ## Release Notes
 
+### v2.1.0
+  * Fix for `dragover` event not getting `preventDefault` called on it when debounced to ensure the `drop` event fires.
+  * Update to v1.4.0 of [`native-event-vue`](https://www.npmjs.com/package/native-event-vue)
+  * Do not log updated lifecycle hooks when it did not result in the event handler being attached or detached.
+  * Remove drop handling in beforeMount and updated lifecycle hooks when the bound value changes to `false`
+  * Remove all classes and event handlers instead of just setting the `draggable` attribute to `false` when the drag directive binding is set to `false`
+
+
 ### v2.0.0
   * Migrate to [`native-event-vue`](https://www.npmjs.com/package/native-event-vue) to manage adding and removing HTML native events to DOM elements and leverage its debouncing capabilities on the `dragover` event.
   * The `dragover` event is now debounced by default and the attached handler will only run at most once every 500ms. The debounce time and debounce mode can be configured on the plugin options.

cspell.json

@@ -11,6 +11,7 @@
     "cstat",
     "datagridvue",
     "docsearch",
+    "dont",
     "dragover",
     "fstat",
     "gapi",

lib/drag.ts

@@ -25,22 +25,24 @@ export function useDragDirective(opts: DragonDropVueOptions) {
       vnode: VNode<any, HTMLElement>,
       prevVnode: VNode<any, HTMLElement> | null,
     ) => {
+      const isSetup = el.getAttribute('draggable') === 'true'
       if (binding.value === false) {
-        el.setAttribute('draggable', 'false')
-      } else if (el.getAttribute('draggable') !== 'true') {
+        if (isSetup) {
+          removeDrag(el, opts)
+          log({ eventName: 'drag | updated', domEl: el, dragOpts: binding.value, opts })
+        }
+      } else if (!isSetup) {
         setupDrag(el, binding.value, opts)
+        log({ eventName: 'drag | updated', domEl: el, dragOpts: binding.value, opts })
       }
-      log({ eventName: 'drag | updated', domEl: el, dragOpts: binding.value, opts })
     },
     beforeUnmount: (
       el: HTMLElement,
       binding: DirectiveBinding<DragonDropVueDragOptions | false>,
       vnode: VNode<any, HTMLElement>,
       prevVnode: VNode<any, HTMLElement> | null,
     ) => {
-      // remove drag events
-      removeEventHandler(el, 'dragstart', opts)
-      removeEventHandler(el, 'dragend', opts)
+      removeDrag(el, opts)
       log({ eventName: 'drag | beforeUnmount', domEl: el, dragOpts: binding.value, opts })
     },
   } as Directive<HTMLElement, DragonDropVueDragOptions | false>
@@ -57,3 +59,15 @@ function setupDrag(el: HTMLElement, dragOpts: DragonDropVueDragOptions, opts: Dr
   addEventHandler(el, 'dragstart', ev => onDragStart(ev, dragOpts, opts), dragOpts, opts)
   addEventHandler(el, 'dragend', ev => onDragEnd(ev, dragOpts, opts), dragOpts, opts)
 }
+
+function removeDrag(el: HTMLElement, opts: DragonDropVueOptions) {
+  // remove css classes
+  addClasses(el, [constants.dragClass, opts.dragClass])
+
+  // set draggable attribute to false
+  el.setAttribute('draggable', 'false')
+
+  // remove drag events
+  removeEventHandler(el, 'dragstart', opts)
+  removeEventHandler(el, 'dragend', opts)
+}

lib/drop.ts

@@ -1,7 +1,7 @@
 import type { Directive, DirectiveBinding, VNode } from 'vue'
 import constants from './constants'
 import { onDragEnter, onDragLeave, onDragOver, onDrop } from './eventHandlers'
-import { addClasses, addEventHandler, removeEventHandler } from './htmlHelpers'
+import { addClasses, addEventHandler, removeClasses, removeEventHandler } from './htmlHelpers'
 import type { DragonDropVueDragOptions, DragonDropVueOptions } from './options'
 import { log } from './logger'
 
@@ -26,27 +26,27 @@ export function useDropDirective(opts: DragonDropVueOptions) {
       vnode: VNode<any, HTMLElement>,
       prevVnode: VNode<any, HTMLElement> | null,
     ) => {
+      const domEl = el as HTMLElement
       if (binding.value === false) {
+        if (domEl.classList.contains(constants.dropClass)) {
+          removeDrop(el, opts)
+          log({ eventName: 'drop | updated', domEl: el, dragOpts: binding.value, opts })
+        }
         return
       }
 
-      const domEl = el as HTMLElement
       if (!domEl.classList.contains(constants.dropClass)) {
         setupDrop(el, binding.value, opts)
+        log({ eventName: 'drop | updated', domEl: el, dragOpts: binding.value, opts })
       }
-      log({ eventName: 'drop | updated', domEl: el, dragOpts: binding.value, opts })
     },
     beforeUnmount: (
       el: HTMLElement,
       binding: DirectiveBinding<DragonDropVueDragOptions | false>,
       vnode: VNode<any, HTMLElement>,
       prevVnode: VNode<any, HTMLElement> | null,
     ) => {
-      // remove drag events
-      removeEventHandler(el, 'dragover', opts)
-      removeEventHandler(el, 'dragenter', opts)
-      removeEventHandler(el, 'dragleave', opts)
-      removeEventHandler(el, 'drop', opts)
+      removeDrop(el, opts)
       log({ eventName: 'drop | beforeUnmount', domEl: el, dragOpts: binding.value, opts })
     },
   } as Directive<HTMLElement, DragonDropVueDragOptions | false>
@@ -62,3 +62,14 @@ function setupDrop(el: HTMLElement, dragOpts: DragonDropVueDragOptions, opts: Dr
   addEventHandler(el, 'dragleave', ev => onDragLeave(ev, dragOpts, opts), dragOpts, opts)
   addEventHandler(el, 'drop', ev => onDrop(ev, dragOpts, opts), dragOpts, opts)
 }
+
+function removeDrop(el: HTMLElement, opts: DragonDropVueOptions) {
+  // remove css classes
+  removeClasses(el, [constants.dropClass, opts.dropClass])
+
+  // remove drag events
+  removeEventHandler(el, 'dragover', opts)
+  removeEventHandler(el, 'dragenter', opts)
+  removeEventHandler(el, 'dragleave', opts)
+  removeEventHandler(el, 'drop', opts)
+}

lib/eventHandlers.ts

@@ -71,12 +71,6 @@ export function onDragEnd(event: DragEvent, dragOpts: DragonDropVueDragOptions,
 }
 
 export function onDragOver(event: DragEvent, dragOpts: DragonDropVueDragOptions, opts: DragonDropVueOptions): boolean | undefined {
-  /*
-   * To ensure that the drop event always fires as expected, you should always include a preventDefault() call in the part of your
-   * code which handles the dragover event.
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event
-   */
-  event.preventDefault()
   const domEl = event.target as HTMLElement
 
   log({ eventName: 'onDragOver', event, domEl, dragOpts, opts })

lib/htmlHelpers.ts

@@ -21,9 +21,15 @@ export function addEventHandler(
   dragOpts: DragonDropVueDragOptions,
   opts: DragonDropVueOptions,
 ) {
-  const debounceMs = eventName === 'dragover' ? dragOpts.dragOverDebounceMs ?? opts.dragOverDebounceMs : undefined
-  const debounceMode = eventName === 'dragover' ? dragOpts.dragOverDebounceMode ?? opts.dragOverDebounceMode : undefined
-  useNativeEvent(domEl, eventName, listener as (ev: Event) => any, undefined, debounceMs, debounceMode)
+  const isDragOver = eventName === 'dragover'
+  const debounceMs = isDragOver ? dragOpts.dragOverDebounceMs ?? opts.dragOverDebounceMs : undefined
+  const debounceMode = isDragOver ? dragOpts.dragOverDebounceMode ?? opts.dragOverDebounceMode : undefined
+  /*
+   * To ensure that the drop event always fires as expected, you should always include a preventDefault() call in the part of your
+   * code which handles the dragover event.
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event
+   */
+  useNativeEvent(domEl, eventName, listener as (ev: Event) => any, undefined, debounceMs, debounceMode, false, isDragOver)
   log({ eventName: `addEventHandler | ${eventName}`, domEl, opts })
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragon-drop-vue",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Customizable native Vue3 drag-n-drop library with no dependencies. Includes Vue plugin that registers directives to configure draggable elements and drop zones.",
   "license": "MIT",
   "author": {
@@ -107,6 +107,6 @@
     "*.{ts,json,vue,css}": "prettier --write"
   },
   "dependencies": {
-    "native-event-vue": "^1.2.0"
+    "native-event-vue": "^1.4.0"
   }
 }