Add custom dragging event support for all HTMLElement

d.ts/antos.d.ts

@@ -3629,6 +3629,22 @@ interface HTMLElement {
      * @memberof HTMLElement
      */
     afxml(o: OS.API.Announcer): void;
+    /**
+     * Enable the drag event dispatching on this
+     * element
+     *
+     * This will trigger the `drag` 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);
+     * ```
+     *
+     * @meberof HTMLElement
+     */
+    enable_drag(): void;
     /**
      * Perform DOM generation ([[afxml]]) then mount ([[sync]]) all the
      * elements.
@@ -8763,14 +8779,6 @@ declare namespace OS {
                  * @memberof FloatListTag
                  */
                 push(v: GenericObject<any>): ListViewItemTag;
-                /**
-                 * Enable drag and drop on the list
-                 *
-                 * @private
-                 * @param {ListViewItemTag} el the list item DOM element
-                 * @memberof FloatListTag
-                 */
-                private enable_drag;
                 /**
                  * Calibrate the view of the list
                  *

src/core/tags/FloatListTag.ts

@@ -123,49 +123,26 @@ namespace OS {
                  */
                 push(v: GenericObject<any>) {
                     const el = super.push(v);
-                    this.enable_drag(el);
-                    return el;
-                }
-
-                /**
-                 * Enable drag and drop on the list
-                 *
-                 * @private
-                 * @param {ListViewItemTag} el the list item DOM element
-                 * @memberof FloatListTag
-                 */
-                private enable_drag(el: ListViewItemTag): void {
                     $(el)
                         .css("user-select", "none")
                         .css("cursor", "default")
                         .css("display", "block")
-                        .css("position", "absolute")
+                        .css("position", "absolute");
-                        .on("pointerdown", (evt) => {
+                    el.enable_drag();
-                            const globalof = $(this.refs.mlist).offset();
+                    $(el).on("dragging", (evt) => {
-                            //evt.preventDefault();
+                        const e = evt.originalEvent as CustomEvent;
-                            const offset = $(el).offset();
+                        const globalof = $(this.refs.mlist).offset();
-                            offset.top = evt.clientY - offset.top;
+                        const offset = e.detail.offset;
-                            offset.left = evt.clientX - offset.left;
+                        let top = e.detail.current.clientY - offset.top - globalof.top;
-                            const mouse_move = function (
+                        let left =
-                                e: JQuery.MouseEventBase
+                            e.detail.current.clientX - globalof.left - offset.left;
-                            ) {
+                        left = left < 0 ? 0 : left;
-                                let top = e.clientY - offset.top - globalof.top;
+                        top = top < 0 ? 0 : top;
-                                let left =
+                        $(el)
-                                    e.clientX - globalof.left - offset.left;
+                            .css("top", `${top}px`)
-                                left = left < 0 ? 0 : left;
+                            .css("left", `${left}px`);
-                                top = top < 0 ? 0 : top;
+                    })
-                                return $(el)
+                    return el;
-                                    .css("top", `${top}px`)
-                                    .css("left", `${left}px`);
-                            };
-
-                            var mouse_up = function (e: JQuery.MouseEventBase) {
-                                $(window).off("pointermove", mouse_move);
-                                return $(window).off("pointerup", mouse_up);
-                            };
-                            $(window).on("pointermove", mouse_move);
-                            return $(window).on("pointerup", mouse_up);
-                        });
                 }
 
                 /**

src/core/tags/tag.ts

@@ -50,6 +50,23 @@ interface HTMLElement {
      */
     afxml(o: OS.API.Announcer): void;
 
+    /**
+     * 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
+     * 
+     * The event can be listened using the traditional way,
+     * Example:
+     * ```
+     * elem.addEventListener('dragging', (e) => {  }, false);
+     * ```
+     * 
+     * @meberof HTMLElement
+     */
+    enable_drag():void;
+
     /**
      * Perform DOM generation ([[afxml]]) then mount ([[sync]]) all the
      * elements.
@@ -596,6 +613,32 @@ namespace OS {
             }
         }
 
+        HTMLElement.prototype.enable_drag = function()
+        {
+            $(this)
+                .on("pointerdown", (evt: JQuery.MouseEventBase) => {
+                    const offset = $(this).offset();
+                    offset.top = evt.clientY - offset.top;
+                    offset.left = evt.clientX - offset.left;
+                    const mouse_move = (
+                        e: JQuery.MouseEventBase
+                    )  => {
+                        const custom_event = new CustomEvent('dragging', { detail:{
+                            origin: evt,
+                            current: e,
+                            offset: offset
+                        }});
+                        this.dispatchEvent(custom_event);
+                    };
+
+                    var mouse_up = function (e: JQuery.MouseEventBase) {
+                        $(window).off("pointermove", mouse_move);
+                        return $(window).off("pointerup", mouse_up);
+                    };
+                    $(window).on("pointermove", mouse_move);
+                    $(window).on("pointerup", mouse_up);
+                });
+        }        
 
         HTMLElement.prototype.update = function (d): void {
             $(this)