Merge pull request #1464 from adumesny/h5

h5: you can now drag to trash to delete item

Author: adumesny

src/dragdrop/dd-draggable.ts

@@ -8,7 +8,7 @@
 import { DDManager } from './dd-manager';
 import { DDUtils } from './dd-utils';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-import { DDUIData } from '../types';
+import { GridItemHTMLElement, DDUIData } from '../types';
 
 export interface DDDraggableOpt {
   appendTo?: string | HTMLElement;
@@ -93,6 +93,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     }
     this.el.draggable = false;
     this.el.classList.remove('ui-draggable');
+    this.el.removeEventListener('mousedown', this.mouseDown);
     this.el.removeEventListener('dragstart', this.dragStart);
     delete this.el;
     delete this.helper;
@@ -229,9 +230,12 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   }
 
   private removeHelperStyle(): DDDraggable {
-    DDDraggable.originStyleProp.forEach(prop => {
-      this.helper.style[prop] = this.dragElementOriginStyle[prop] || null;
-    });
+    // don't bother restoring styles if we're gonna remove anyway...
+    if (! (this.helper as GridItemHTMLElement)?.gridstackNode?._isAboutToRemove) {
+      DDDraggable.originStyleProp.forEach(prop => {
+        this.helper.style[prop] = this.dragElementOriginStyle[prop] || null;
+      });
+    }
     delete this.dragElementOriginStyle;
     return this;
   }

src/dragdrop/dd-droppable.ts

@@ -86,6 +86,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
+  /** called when the cursor enters our area - prepare for a possible drop and track leaving */
   protected dragEnter(event: DragEvent): void {
     this.el.removeEventListener('dragenter', this.dragEnter);
     this.acceptable = this.canDrop();
@@ -103,44 +104,47 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
     this.el.addEventListener('dragleave', this.dragLeave);
   }
 
+  /** called when an acceptable to drop item is being dragged over - do nothing but eat the event */
   private dragOver(event: DragEvent): void {
     event.preventDefault();
     event.stopPropagation();
   }
 
+  /** called when the item is leaving our area, stop tracking if we had acceptable item */
   private dragLeave(event: DragEvent): void {
     if (this.el.contains(event.relatedTarget as HTMLElement)) { return; }
-    this.el.removeEventListener('dragleave', this.dragLeave);
-    this.el.classList.remove('ui-droppable-over');
+    this.removeLeaveCallbacks();
     if (this.acceptable) {
       event.preventDefault();
-      this.el.removeEventListener('dragover', this.dragOver);
-      this.el.removeEventListener('drop', this.drop);
       const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'dropout' });
       if (this.option.out) {
         this.option.out(ev, this.ui(DDManager.dragElement))
       }
       this.triggerEvent('dropout', ev);
     }
-    this.el.addEventListener('dragenter', this.dragEnter);
   }
 
+  /** item is being dropped on us - call the client drop event */
   private drop(event: DragEvent): void {
+    if (!this.acceptable) { return; } // should not have received event...
+    event.preventDefault();
+    const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drop' });
+    if (this.option.drop) {
+      this.option.drop(ev, this.ui(DDManager.dragElement))
+    }
+    this.triggerEvent('drop', ev);
+    this.removeLeaveCallbacks();
+  }
+
+  /** called to remove callbacks when leaving or dropping */
+  private removeLeaveCallbacks() {
+    this.el.removeEventListener('dragleave', this.dragLeave);
+    this.el.classList.remove('ui-droppable-over');
     if (this.acceptable) {
-      event.preventDefault();
-      const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drop' });
-      if (this.option.drop) {
-        this.option.drop(ev, this.ui(DDManager.dragElement))
-      }
-      this.triggerEvent('drop', ev);
-      this.dragLeave({
-        ...ev,
-        relatedTarget: null,
-        preventDefault: () => {
-          // do nothing
-        }
-      });
+      this.el.removeEventListener('dragover', this.dragOver);
+      this.el.removeEventListener('drop', this.drop);
     }
+    this.el.addEventListener('dragenter', this.dragEnter);
   }
 
   private canDrop(): boolean {