dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-09-19 23:36:39 +02:00
Code Issues 1 Actions Projects Releases Wiki Activity

Add custom dragging event support for all HTMLElement

Browse Source
This commit is contained in:
DanyLE 2023-01-07 22:57:00 +01:00 committed by Dany LE
parent db006345a9
commit b2ec7cc8db
3 changed files with 76 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
*

55
src/core/tags/FloatListTag.ts
View File

@ -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")
.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;
}
/**

45
src/core/tags/tag.ts
View File

@ -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)