From b5ad480f492784e1190e28ecebbd34439b55c8f1 Mon Sep 17 00:00:00 2001 From: luckylionheart Date: Mon, 23 Sep 2024 12:21:24 +0200 Subject: [PATCH 1/7] WIP: add touchstart, touchend, touchmove event for mobile drag and drop --- drag/drag.view.tree | 3 + drag/drag.view.ts | 136 ++++++++++++++++++++++++++++++++------------ 2 files changed, 104 insertions(+), 35 deletions(-) diff --git a/drag/drag.view.tree b/drag/drag.view.tree index f630dfecd26..d80c47dc018 100644 --- a/drag/drag.view.tree +++ b/drag/drag.view.tree @@ -3,6 +3,9 @@ $mol_drag $mol_ghost dragstart?event <=> drag_start?event <=> start?event null drag?event <=> drag_move?event <=> move?event null dragend?event <=> drag_end?event <=> end?event null + touchstart?event <=> drag_start?event <=> start?event null + touchmove?event <=> drag_move?event <=> move?event null + touchend?event <=> drag_end?event <=> end?event null attr * draggable true mol_drag_status <= status? \ready diff --git a/drag/drag.view.ts b/drag/drag.view.ts index 250350e3c98..0c1c1028eba 100644 --- a/drag/drag.view.ts +++ b/drag/drag.view.ts @@ -3,39 +3,105 @@ namespace $.$$ { /** * @see https://mol.hyoo.ru/#!section=demos/demo=mol_drag_demo */ - export class $mol_drag extends $.$mol_drag { - - @ $mol_mem - status( next = 'ready' as 'ready' | 'drag' ) { return next } - - drag_start( event : DragEvent ) { - - setTimeout( ()=> this.status( 'drag' ) ) - - const transfer = this.transfer() - for( let type in transfer ) { - event.dataTransfer!.setData( type , transfer[ type as keyof typeof transfer] ) - } - - event.dataTransfer!.setDragImage( this.image() , 0 , -32 ) - - const effects = [] as string[] - if( this.allow_copy() ) effects.push( 'Copy' ) - if( this.allow_link() ) effects.push( 'Link' ) - if( this.allow_move() ) effects.push( 'Move' ) - - let effectAllowed = effects[0].toLowerCase() + effects.slice(1).join('') - if( effectAllowed === 'copyLinkMove' ) effectAllowed = 'all' - event.dataTransfer!.effectAllowed = effectAllowed as DataTransfer['effectAllowed'] - - this.start( event ) - - } - - drag_end( event : DragEvent ) { - setTimeout( ()=> this.status( 'ready' ) ) - this.end( event ) - } - - } + export class $mol_drag extends $.$mol_drag { + + private dragged_task: HTMLElement | null = null; + private initial_task_index: number | null = null; + private start_position = { x: 0, y: 0 }; + + @ $mol_mem + status( next = 'ready' as 'ready' | 'drag' ) { return next } + + drag_start( event: DragEvent | TouchEvent ) { + if (event instanceof TouchEvent) { + this.handle_touch_start(event); + return; + } + + setTimeout(() => this.status('drag')); + + this.dragged_task = event.target as HTMLElement; + this.initial_task_index = Array.from(this.dragged_task.parentElement!.children).indexOf(this.dragged_task); + + const transfer = this.transfer(); + for (let type in transfer) { + (event as DragEvent).dataTransfer!.setData(type, transfer[type as keyof typeof transfer]); + } + + (event as DragEvent).dataTransfer!.setDragImage(this.image(), 0, -32); + + this.start(event as DragEvent); + } + + drag_move( event: DragEvent | TouchEvent ) { + if (event instanceof TouchEvent) { + this.handle_touch_move(event); + return; + } + + event.preventDefault(); + + const draggedOverElem = document.elementFromPoint(event.clientX, event.clientY); + if (draggedOverElem && draggedOverElem !== this.dragged_task && draggedOverElem.parentElement === this.dragged_task!.parentElement) { + const parent = this.dragged_task!.parentElement; + const draggedOverIndex = Array.from(parent!.children).indexOf(draggedOverElem as HTMLElement); + + if (draggedOverIndex !== this.initial_task_index) { + parent!.insertBefore(this.dragged_task!, draggedOverElem); + this.initial_task_index = draggedOverIndex; + } + } + } + + drag_end( event: DragEvent | TouchEvent ) { + if (event instanceof TouchEvent) { + this.handle_touch_end(event); + return; + } + + setTimeout(() => this.status('ready')); + + this.dragged_task = null; + this.initial_task_index = null; + + this.end(event as DragEvent); + } + + handle_touch_start( event: TouchEvent ) { + this.status('drag'); + + this.dragged_task = event.target as HTMLElement; + this.initial_task_index = Array.from(this.dragged_task!.parentElement!.children).indexOf(this.dragged_task); + + const touch = event.touches[0]; + this.start_position = { x: touch.clientX, y: touch.clientY }; + + this.start(event); + } + + handle_touch_move( event: TouchEvent ) { + event.preventDefault(); + + const touch = event.touches[0]; + const draggedOverElem = document.elementFromPoint(touch.clientX, touch.clientY); + + if (draggedOverElem && draggedOverElem !== this.dragged_task && draggedOverElem.parentElement === this.dragged_task!.parentElement) { + const parent = this.dragged_task!.parentElement; + const draggedOverIndex = Array.from(parent!.children).indexOf(draggedOverElem as HTMLElement); + + if (draggedOverIndex !== this.initial_task_index) { + parent!.insertBefore(this.dragged_task!, draggedOverElem); + this.initial_task_index = draggedOverIndex; + } + } + } + + handle_touch_end( event: TouchEvent ) { + this.dragged_task = null; + this.initial_task_index = null; + this.status('ready'); + this.end(event); + } + } + } From a1a34a680e4c010cf8f7bf3b0debd8a281eb7b4a Mon Sep 17 00:00:00 2001 From: luckylionheart Date: Tue, 8 Oct 2024 22:49:46 -0400 Subject: [PATCH 2/7] add: missing preview feature --- drag/drag.view.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/drag/drag.view.ts b/drag/drag.view.ts index 0c1c1028eba..5a5d9b870c0 100644 --- a/drag/drag.view.ts +++ b/drag/drag.view.ts @@ -30,6 +30,16 @@ namespace $.$$ { (event as DragEvent).dataTransfer!.setDragImage(this.image(), 0, -32); + const effects = [] as string[] + if( this.allow_copy() ) effects.push( 'Copy' ) + if( this.allow_link() ) effects.push( 'Link' ) + if( this.allow_move() ) effects.push( 'Move' ) + + let effectAllowed = effects[0].toLowerCase() + effects.slice(1).join('') + if( effectAllowed === 'copyLinkMove' ) effectAllowed = 'all'; + + (event as DragEvent).dataTransfer!.effectAllowed = effectAllowed as DataTransfer['effectAllowed'] + this.start(event as DragEvent); } From dd86325339067dfab971b829eb773a604b036357 Mon Sep 17 00:00:00 2001 From: luckylionheart Date: Mon, 21 Oct 2024 03:48:29 -0400 Subject: [PATCH 3/7] update: trash feature --- drag/drag.view.ts | 279 ++++++++++++++++++++++++++++------------------ 1 file changed, 171 insertions(+), 108 deletions(-) diff --git a/drag/drag.view.ts b/drag/drag.view.ts index 5a5d9b870c0..679a1d1c4db 100644 --- a/drag/drag.view.ts +++ b/drag/drag.view.ts @@ -1,117 +1,180 @@ namespace $.$$ { - - /** - * @see https://mol.hyoo.ru/#!section=demos/demo=mol_drag_demo - */ + /** + * @see https://mol.hyoo.ru/#!section=demos/demo=mol_drag_demo + */ export class $mol_drag extends $.$mol_drag { - - private dragged_task: HTMLElement | null = null; - private initial_task_index: number | null = null; - private start_position = { x: 0, y: 0 }; - - @ $mol_mem - status( next = 'ready' as 'ready' | 'drag' ) { return next } - - drag_start( event: DragEvent | TouchEvent ) { - if (event instanceof TouchEvent) { - this.handle_touch_start(event); - return; - } - - setTimeout(() => this.status('drag')); - - this.dragged_task = event.target as HTMLElement; - this.initial_task_index = Array.from(this.dragged_task.parentElement!.children).indexOf(this.dragged_task); - - const transfer = this.transfer(); - for (let type in transfer) { - (event as DragEvent).dataTransfer!.setData(type, transfer[type as keyof typeof transfer]); - } - - (event as DragEvent).dataTransfer!.setDragImage(this.image(), 0, -32); - - const effects = [] as string[] - if( this.allow_copy() ) effects.push( 'Copy' ) - if( this.allow_link() ) effects.push( 'Link' ) - if( this.allow_move() ) effects.push( 'Move' ) - - let effectAllowed = effects[0].toLowerCase() + effects.slice(1).join('') - if( effectAllowed === 'copyLinkMove' ) effectAllowed = 'all'; - - (event as DragEvent).dataTransfer!.effectAllowed = effectAllowed as DataTransfer['effectAllowed'] - - this.start(event as DragEvent); + private dragged_task: HTMLElement | null = null; + private initial_task_index: number | null = null; + private draggedOverElem: HTMLElement | null = null; + private dragImageElem: HTMLElement | null = null; + + @$mol_mem + status(next = "ready" as "ready" | "drag") { + return next; + } + + drag_start(event: DragEvent | TouchEvent) { + if (event instanceof TouchEvent) { + this.handle_touch_start(event); + return; } - - drag_move( event: DragEvent | TouchEvent ) { - if (event instanceof TouchEvent) { - this.handle_touch_move(event); - return; - } - - event.preventDefault(); - - const draggedOverElem = document.elementFromPoint(event.clientX, event.clientY); - if (draggedOverElem && draggedOverElem !== this.dragged_task && draggedOverElem.parentElement === this.dragged_task!.parentElement) { - const parent = this.dragged_task!.parentElement; - const draggedOverIndex = Array.from(parent!.children).indexOf(draggedOverElem as HTMLElement); - - if (draggedOverIndex !== this.initial_task_index) { - parent!.insertBefore(this.dragged_task!, draggedOverElem); - this.initial_task_index = draggedOverIndex; - } - } + + setTimeout(() => this.status("drag")); + + this.dragged_task = event.target as HTMLElement; + this.initial_task_index = Array.from( + this.dragged_task.parentElement!.children + ).indexOf(this.dragged_task); + + const transfer = this.transfer(); + for (let type in transfer) { + (event as DragEvent).dataTransfer!.setData( + type, + transfer[type as keyof typeof transfer] + ); } - - drag_end( event: DragEvent | TouchEvent ) { - if (event instanceof TouchEvent) { - this.handle_touch_end(event); - return; - } - - setTimeout(() => this.status('ready')); - - this.dragged_task = null; - this.initial_task_index = null; - - this.end(event as DragEvent); + + (event as DragEvent).dataTransfer!.setDragImage(this.image(), 0, -32); + + const effects = [] as string[]; + if (this.allow_copy()) effects.push("Copy"); + if (this.allow_link()) effects.push("Link"); + if (this.allow_move()) effects.push("Move"); + + let effectAllowed = effects[0].toLowerCase() + effects.slice(1).join(""); + if (effectAllowed === "copyLinkMove") effectAllowed = "all"; + (event as DragEvent).dataTransfer!.effectAllowed = + effectAllowed as DataTransfer["effectAllowed"]; + + this.start(event as DragEvent); + } + + drag_move(event: DragEvent | TouchEvent) { + if (event instanceof TouchEvent) { + this.handle_touch_move(event); + return; } - - handle_touch_start( event: TouchEvent ) { - this.status('drag'); - - this.dragged_task = event.target as HTMLElement; - this.initial_task_index = Array.from(this.dragged_task!.parentElement!.children).indexOf(this.dragged_task); - - const touch = event.touches[0]; - this.start_position = { x: touch.clientX, y: touch.clientY }; - - this.start(event); + + event.preventDefault(); + + const draggedOverElem = document.elementFromPoint( + event.clientX, + event.clientY + ); + if ( + draggedOverElem && + draggedOverElem !== this.dragged_task && + draggedOverElem.parentElement === this.dragged_task!.parentElement + ) { + const parent = this.dragged_task!.parentElement; + const draggedOverIndex = Array.from(parent!.children).indexOf( + draggedOverElem as HTMLElement + ); + + if (draggedOverIndex !== this.initial_task_index) { + parent!.insertBefore(this.dragged_task!, draggedOverElem); + this.initial_task_index = draggedOverIndex; + } } - - handle_touch_move( event: TouchEvent ) { - event.preventDefault(); - - const touch = event.touches[0]; - const draggedOverElem = document.elementFromPoint(touch.clientX, touch.clientY); - - if (draggedOverElem && draggedOverElem !== this.dragged_task && draggedOverElem.parentElement === this.dragged_task!.parentElement) { - const parent = this.dragged_task!.parentElement; - const draggedOverIndex = Array.from(parent!.children).indexOf(draggedOverElem as HTMLElement); - - if (draggedOverIndex !== this.initial_task_index) { - parent!.insertBefore(this.dragged_task!, draggedOverElem); - this.initial_task_index = draggedOverIndex; - } - } + } + + drag_end(event: DragEvent | TouchEvent) { + if (event instanceof TouchEvent) { + this.handle_touch_end(event); + return; } - - handle_touch_end( event: TouchEvent ) { - this.dragged_task = null; - this.initial_task_index = null; - this.status('ready'); - this.end(event); + + setTimeout(() => this.status("ready")); + + this.dragged_task = null; + this.initial_task_index = null; + + this.end(event as DragEvent); + } + + handle_touch_start(event: TouchEvent) { + this.status("drag"); + + this.dragged_task = event.target as HTMLElement; + this.initial_task_index = Array.from( + this.dragged_task!.parentElement!.children + ).indexOf(this.dragged_task); + + this.dragImageElem = this.dragged_task.cloneNode(true) as HTMLElement; + + this.dragImageElem.style.position = "absolute"; + this.dragImageElem.style.pointerEvents = "none"; + this.dragImageElem.style.zIndex = "9999"; + this.dragImageElem.style.color = "var(--mol_theme_focus)"; + + document.body.appendChild(this.dragImageElem); + + const touch = event.touches[0]; + this.moveDragImage(touch.clientX, touch.clientY); + + this.start(event); + } + + handle_touch_move(event: TouchEvent) { + event.preventDefault(); + + const touch = event.touches[0]; + const draggedOverElem = document.elementFromPoint( + touch.clientX, + touch.clientY + ); + + if (this.dragImageElem) { + this.moveDragImage(touch.clientX, touch.clientY); } + + this.draggedOverElem = draggedOverElem as HTMLElement; + + if ( + draggedOverElem && + draggedOverElem !== this.dragged_task && + draggedOverElem.parentElement === this.dragged_task!.parentElement + ) { + const parent = this.dragged_task!.parentElement; + const draggedOverIndex = Array.from(parent!.children).indexOf( + draggedOverElem as HTMLElement + ); + + if (draggedOverIndex !== this.initial_task_index) { + parent!.insertBefore(this.dragged_task!, draggedOverElem); + this.initial_task_index = draggedOverIndex; + } + } + } + + handle_touch_end(event: TouchEvent) { + if (this.draggedOverElem) { + if ( + this.draggedOverElem.id == + "$hyoo_mol.Root(0).Demos().Widget('$mol_drag_demo').Trash()" + ) { + this.dragged_task?.remove(); + } + } + + if (this.dragImageElem) { + this.dragImageElem.remove(); + this.dragImageElem = null; + } + + this.draggedOverElem = null; + this.dragged_task = null; + this.initial_task_index = null; + this.status("ready"); + this.end(event); + } + + moveDragImage(x: number, y: number) { + if (this.dragImageElem) { + this.dragImageElem.style.left = `${x + 50}px`; + this.dragImageElem.style.top = `${y + 50}px`; + } + } } - -} + } + \ No newline at end of file From 1892e10991770aaee95541f4cd4843446a19c11a Mon Sep 17 00:00:00 2001 From: luckylionheart Date: Mon, 11 Nov 2024 08:15:07 -0500 Subject: [PATCH 4/7] update: fix the working for IOS --- drag/drag.view.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/drag/drag.view.ts b/drag/drag.view.ts index 679a1d1c4db..eaa7374895d 100644 --- a/drag/drag.view.ts +++ b/drag/drag.view.ts @@ -93,6 +93,7 @@ namespace $.$$ { } handle_touch_start(event: TouchEvent) { + event.preventDefault(); this.status("drag"); this.dragged_task = event.target as HTMLElement; From fafb89b8db8f8c1734323033a1f401368b60fad1 Mon Sep 17 00:00:00 2001 From: luckylionheart Date: Thu, 14 Nov 2024 16:06:22 -0500 Subject: [PATCH 5/7] update: revert code --- drag/drag.view.tree | 3 - drag/drag.view.ts | 220 ++++++++------------------------------------ 2 files changed, 40 insertions(+), 183 deletions(-) diff --git a/drag/drag.view.tree b/drag/drag.view.tree index d80c47dc018..f630dfecd26 100644 --- a/drag/drag.view.tree +++ b/drag/drag.view.tree @@ -3,9 +3,6 @@ $mol_drag $mol_ghost dragstart?event <=> drag_start?event <=> start?event null drag?event <=> drag_move?event <=> move?event null dragend?event <=> drag_end?event <=> end?event null - touchstart?event <=> drag_start?event <=> start?event null - touchmove?event <=> drag_move?event <=> move?event null - touchend?event <=> drag_end?event <=> end?event null attr * draggable true mol_drag_status <= status? \ready diff --git a/drag/drag.view.ts b/drag/drag.view.ts index eaa7374895d..250350e3c98 100644 --- a/drag/drag.view.ts +++ b/drag/drag.view.ts @@ -1,181 +1,41 @@ namespace $.$$ { - /** - * @see https://mol.hyoo.ru/#!section=demos/demo=mol_drag_demo - */ - export class $mol_drag extends $.$mol_drag { - private dragged_task: HTMLElement | null = null; - private initial_task_index: number | null = null; - private draggedOverElem: HTMLElement | null = null; - private dragImageElem: HTMLElement | null = null; - - @$mol_mem - status(next = "ready" as "ready" | "drag") { - return next; - } - - drag_start(event: DragEvent | TouchEvent) { - if (event instanceof TouchEvent) { - this.handle_touch_start(event); - return; - } - - setTimeout(() => this.status("drag")); - - this.dragged_task = event.target as HTMLElement; - this.initial_task_index = Array.from( - this.dragged_task.parentElement!.children - ).indexOf(this.dragged_task); - - const transfer = this.transfer(); - for (let type in transfer) { - (event as DragEvent).dataTransfer!.setData( - type, - transfer[type as keyof typeof transfer] - ); - } - - (event as DragEvent).dataTransfer!.setDragImage(this.image(), 0, -32); - - const effects = [] as string[]; - if (this.allow_copy()) effects.push("Copy"); - if (this.allow_link()) effects.push("Link"); - if (this.allow_move()) effects.push("Move"); - - let effectAllowed = effects[0].toLowerCase() + effects.slice(1).join(""); - if (effectAllowed === "copyLinkMove") effectAllowed = "all"; - (event as DragEvent).dataTransfer!.effectAllowed = - effectAllowed as DataTransfer["effectAllowed"]; - - this.start(event as DragEvent); - } - - drag_move(event: DragEvent | TouchEvent) { - if (event instanceof TouchEvent) { - this.handle_touch_move(event); - return; - } - - event.preventDefault(); - - const draggedOverElem = document.elementFromPoint( - event.clientX, - event.clientY - ); - if ( - draggedOverElem && - draggedOverElem !== this.dragged_task && - draggedOverElem.parentElement === this.dragged_task!.parentElement - ) { - const parent = this.dragged_task!.parentElement; - const draggedOverIndex = Array.from(parent!.children).indexOf( - draggedOverElem as HTMLElement - ); - - if (draggedOverIndex !== this.initial_task_index) { - parent!.insertBefore(this.dragged_task!, draggedOverElem); - this.initial_task_index = draggedOverIndex; - } - } - } - - drag_end(event: DragEvent | TouchEvent) { - if (event instanceof TouchEvent) { - this.handle_touch_end(event); - return; - } - - setTimeout(() => this.status("ready")); - - this.dragged_task = null; - this.initial_task_index = null; - - this.end(event as DragEvent); - } - - handle_touch_start(event: TouchEvent) { - event.preventDefault(); - this.status("drag"); - - this.dragged_task = event.target as HTMLElement; - this.initial_task_index = Array.from( - this.dragged_task!.parentElement!.children - ).indexOf(this.dragged_task); - - this.dragImageElem = this.dragged_task.cloneNode(true) as HTMLElement; - - this.dragImageElem.style.position = "absolute"; - this.dragImageElem.style.pointerEvents = "none"; - this.dragImageElem.style.zIndex = "9999"; - this.dragImageElem.style.color = "var(--mol_theme_focus)"; - - document.body.appendChild(this.dragImageElem); - - const touch = event.touches[0]; - this.moveDragImage(touch.clientX, touch.clientY); - - this.start(event); - } - - handle_touch_move(event: TouchEvent) { - event.preventDefault(); - - const touch = event.touches[0]; - const draggedOverElem = document.elementFromPoint( - touch.clientX, - touch.clientY - ); - - if (this.dragImageElem) { - this.moveDragImage(touch.clientX, touch.clientY); - } - - this.draggedOverElem = draggedOverElem as HTMLElement; - - if ( - draggedOverElem && - draggedOverElem !== this.dragged_task && - draggedOverElem.parentElement === this.dragged_task!.parentElement - ) { - const parent = this.dragged_task!.parentElement; - const draggedOverIndex = Array.from(parent!.children).indexOf( - draggedOverElem as HTMLElement - ); - - if (draggedOverIndex !== this.initial_task_index) { - parent!.insertBefore(this.dragged_task!, draggedOverElem); - this.initial_task_index = draggedOverIndex; - } - } - } - - handle_touch_end(event: TouchEvent) { - if (this.draggedOverElem) { - if ( - this.draggedOverElem.id == - "$hyoo_mol.Root(0).Demos().Widget('$mol_drag_demo').Trash()" - ) { - this.dragged_task?.remove(); - } - } - - if (this.dragImageElem) { - this.dragImageElem.remove(); - this.dragImageElem = null; - } - - this.draggedOverElem = null; - this.dragged_task = null; - this.initial_task_index = null; - this.status("ready"); - this.end(event); - } - - moveDragImage(x: number, y: number) { - if (this.dragImageElem) { - this.dragImageElem.style.left = `${x + 50}px`; - this.dragImageElem.style.top = `${y + 50}px`; - } - } - } - } - \ No newline at end of file + + /** + * @see https://mol.hyoo.ru/#!section=demos/demo=mol_drag_demo + */ + export class $mol_drag extends $.$mol_drag { + + @ $mol_mem + status( next = 'ready' as 'ready' | 'drag' ) { return next } + + drag_start( event : DragEvent ) { + + setTimeout( ()=> this.status( 'drag' ) ) + + const transfer = this.transfer() + for( let type in transfer ) { + event.dataTransfer!.setData( type , transfer[ type as keyof typeof transfer] ) + } + + event.dataTransfer!.setDragImage( this.image() , 0 , -32 ) + + const effects = [] as string[] + if( this.allow_copy() ) effects.push( 'Copy' ) + if( this.allow_link() ) effects.push( 'Link' ) + if( this.allow_move() ) effects.push( 'Move' ) + + let effectAllowed = effects[0].toLowerCase() + effects.slice(1).join('') + if( effectAllowed === 'copyLinkMove' ) effectAllowed = 'all' + event.dataTransfer!.effectAllowed = effectAllowed as DataTransfer['effectAllowed'] + + this.start( event ) + + } + + drag_end( event : DragEvent ) { + setTimeout( ()=> this.status( 'ready' ) ) + this.end( event ) + } + + } +} From 06706ec3a6e79f7b7a8225aef2a62c94f85b3a62 Mon Sep 17 00:00:00 2001 From: luckylionheart Date: Thu, 14 Nov 2024 16:54:41 -0500 Subject: [PATCH 6/7] update: dnd for mobile --- drag/demo/demo.view.css.ts | 9 +++++++++ drag/demo/demo.view.tree | 3 +-- drag/demo/demo.view.ts | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/drag/demo/demo.view.css.ts b/drag/demo/demo.view.css.ts index c78b647d7c9..2d81412ada2 100644 --- a/drag/demo/demo.view.css.ts +++ b/drag/demo/demo.view.css.ts @@ -3,6 +3,15 @@ namespace $.$$ { const {rem,px} = $mol_style_unit $mol_style_define( $mol_drag_demo , { + + Task_content: { + padding: $mol_gap.text, + color: $mol_theme.control, + + ':hover': { + background: $mol_theme.hover, + }, + }, Task_drop:{ '@': { diff --git a/drag/demo/demo.view.tree b/drag/demo/demo.view.tree index 072b94dd44e..9469db173a6 100644 --- a/drag/demo/demo.view.tree +++ b/drag/demo/demo.view.tree @@ -21,8 +21,7 @@ $mol_drag_demo $mol_example_large Sub <= Task_drop* $mol_drop adopt?transfer <=> transfer_adopt?transfer null receive?obj <=> receive_before*?obj null - Sub <= Task_link* $mol_link - uri <= task_uri* \ + Sub <= Task_content* $mol_text sub / <= task_title* \ tags / \drag diff --git a/drag/demo/demo.view.ts b/drag/demo/demo.view.ts index 98ecebb6981..90160473ec8 100644 --- a/drag/demo/demo.view.ts +++ b/drag/demo/demo.view.ts @@ -39,7 +39,7 @@ namespace $.$$ { transfer_adopt( transfer : DataTransfer ) { - const uri = transfer.getData( "text/uri-list" ) + const uri = transfer.getData( "text/uri-list" ) == ""?transfer.getData( "text/plain" ):transfer.getData( "text/uri-list" ) if( !uri ) return return this.task_list().find( task => this.task_uri( task ) === uri ) From 2ef4a4cd48d9be2cb5df390f13f6d213c9172b32 Mon Sep 17 00:00:00 2001 From: luckylionheart Date: Fri, 15 Nov 2024 01:46:05 -0500 Subject: [PATCH 7/7] fix: simplify syntax --- drag/demo/demo.view.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/drag/demo/demo.view.ts b/drag/demo/demo.view.ts index 90160473ec8..a49be46ab4c 100644 --- a/drag/demo/demo.view.ts +++ b/drag/demo/demo.view.ts @@ -39,7 +39,7 @@ namespace $.$$ { transfer_adopt( transfer : DataTransfer ) { - const uri = transfer.getData( "text/uri-list" ) == ""?transfer.getData( "text/plain" ):transfer.getData( "text/uri-list" ) + const uri = transfer.getData( "text/uri-list" ) || transfer.getData( "text/plain" ) if( !uri ) return return this.task_list().find( task => this.task_uri( task ) === uri )