From b2ec7cc8db61202d990e8eb97f673d59c6c231d2 Mon Sep 17 00:00:00 2001 From: DanyLE Date: Sat, 7 Jan 2023 22:57:00 +0100 Subject: [PATCH] Add custom dragging event support for all HTMLElement --- d.ts/antos.d.ts | 24 ++++++++++----- src/core/tags/FloatListTag.ts | 55 ++++++++++------------------------- src/core/tags/tag.ts | 45 +++++++++++++++++++++++++++- 3 files changed, 76 insertions(+), 48 deletions(-) diff --git a/d.ts/antos.d.ts b/d.ts/antos.d.ts index 02406e5..53d2521 100644 --- a/d.ts/antos.d.ts +++ b/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): 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 * diff --git a/src/core/tags/FloatListTag.ts b/src/core/tags/FloatListTag.ts index e670374..388a406 100644 --- a/src/core/tags/FloatListTag.ts +++ b/src/core/tags/FloatListTag.ts @@ -123,49 +123,26 @@ namespace OS { */ push(v: GenericObject) { 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") - .on("pointerdown", (evt) => { - const globalof = $(this.refs.mlist).offset(); - //evt.preventDefault(); - const offset = $(el).offset(); - offset.top = evt.clientY - offset.top; - offset.left = evt.clientX - offset.left; - const mouse_move = function ( - e: JQuery.MouseEventBase - ) { - let top = e.clientY - offset.top - globalof.top; - let left = - e.clientX - globalof.left - offset.left; - left = left < 0 ? 0 : left; - top = top < 0 ? 0 : top; - 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); - }); + .css("position", "absolute"); + el.enable_drag(); + $(el).on("dragging", (evt) => { + const e = evt.originalEvent as CustomEvent; + const globalof = $(this.refs.mlist).offset(); + const offset = e.detail.offset; + let top = e.detail.current.clientY - offset.top - globalof.top; + let left = + e.detail.current.clientX - globalof.left - offset.left; + left = left < 0 ? 0 : left; + top = top < 0 ? 0 : top; + $(el) + .css("top", `${top}px`) + .css("left", `${left}px`); + }) + return el; } /** diff --git a/src/core/tags/tag.ts b/src/core/tags/tag.ts index 2eb28c9..5c96854 100644 --- a/src/core/tags/tag.ts +++ b/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. @@ -595,7 +612,33 @@ namespace OS { return element.hasAttribute(v); } } - + + 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)