add support for drop custom event when drag is enable on an HTMLElement

This commit is contained in:
DanyLE 2023-01-07 23:04:46 +01:00 committed by Dany LE
parent b2ec7cc8db
commit d482d2cad4
2 changed files with 14 additions and 6 deletions

4
d.ts/antos.d.ts vendored
View File

@ -3633,13 +3633,13 @@ interface HTMLElement {
* Enable the drag event dispatching on this * Enable the drag event dispatching on this
* element * 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 * on the element when the mouse is down, then move
* *
* The event can be listened using the traditional way, * The event can be listened using the traditional way,
* Example: * Example:
* ``` * ```
* elem.addEventListener('drag', (e) => { }, false); * elem.addEventListener('dragging', (e) => { }, false);
* ``` * ```
* *
* @meberof HTMLElement * @meberof HTMLElement

View File

@ -54,13 +54,14 @@ interface HTMLElement {
* Enable the drag event dispatching on this * Enable the drag event dispatching on this
* element * element
* *
* This will trigger the `dragging` 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 * element when the mouse is down, move, then up, then move
* *
* The event can be listened using the traditional way, * The event can be listened using the traditional way,
* Example: * Example:
* ``` * ```
* elem.addEventListener('dragging', (e) => { }, false); * elem.addEventListener('dragging', (e) => { }, false);
* elem.addEventListener('drop', (e) => { }, false);
* ``` * ```
* *
* @meberof HTMLElement * @meberof HTMLElement
@ -631,9 +632,16 @@ namespace OS {
this.dispatchEvent(custom_event); this.dispatchEvent(custom_event);
}; };
var mouse_up = function (e: JQuery.MouseEventBase) { var mouse_up = (e: JQuery.MouseEventBase) => {
$(window).off("pointermove", mouse_move); $(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("pointermove", mouse_move);
$(window).on("pointerup", mouse_up); $(window).on("pointerup", mouse_up);