From aa73eed07476147dcaba2004dbe567dded2159b2 Mon Sep 17 00:00:00 2001
From: DanyLE <xsang.le@gmail.com>
Date: Sat, 7 Jan 2023 23:04:46 +0100
Subject: [PATCH] add support for drop custom event when drag is enable on an
 HTMLElement

---
 d.ts/antos.d.ts      |  4 ++--
 src/core/tags/tag.ts | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/d.ts/antos.d.ts b/d.ts/antos.d.ts
index 53d2521..f9058b6 100644
--- a/d.ts/antos.d.ts
+++ b/d.ts/antos.d.ts
@@ -3633,13 +3633,13 @@ interface HTMLElement {
      * Enable the drag event dispatching on this
      * element
      *
-     * This will trigger the `drag` event on the enabled
+     * This will trigger the `dragging` and `drop` event on the enabled
      * on the element when the mouse is down, then move
      *
      * The event can be listened using the traditional way,
      * Example:
      * ```
-     * elem.addEventListener('drag', (e) => {  }, false);
+     * elem.addEventListener('dragging', (e) => {  }, false);
      * ```
      *
      * @meberof HTMLElement
diff --git a/src/core/tags/tag.ts b/src/core/tags/tag.ts
index 5c96854..81fdcc2 100644
--- a/src/core/tags/tag.ts
+++ b/src/core/tags/tag.ts
@@ -54,13 +54,14 @@ interface HTMLElement {
      * Enable the drag event dispatching on this
      * element
      * 
-     * This will trigger the `dragging` event on the enabled
-     * on the element when the mouse is down, then move
+     * This will trigger the `dragging` and `drop` event on the enabled
+     * element when the mouse is down, move, then up, then move
      * 
      * The event can be listened using the traditional way,
      * Example:
      * ```
      * elem.addEventListener('dragging', (e) => {  }, false);
+     * elem.addEventListener('drop', (e) => {  }, false);
      * ```
      * 
      * @meberof HTMLElement
@@ -631,9 +632,16 @@ namespace OS {
                         this.dispatchEvent(custom_event);
                     };
 
-                    var mouse_up = function (e: JQuery.MouseEventBase) {
+                    var mouse_up = (e: JQuery.MouseEventBase) => {
                         $(window).off("pointermove", mouse_move);
-                        return $(window).off("pointerup", mouse_up);
+                        $(window).off("pointerup", mouse_up);
+                        // trigger the drop event
+                        const custom_event = new CustomEvent('drop', { detail:{
+                            origin: evt,
+                            current: e,
+                            offset: offset
+                        }});
+                        this.dispatchEvent(custom_event);
                     };
                     $(window).on("pointermove", mouse_move);
                     $(window).on("pointerup", mouse_up);