diff --git a/packages/dockview-core/src/dnd/droptarget.scss b/packages/dockview-core/src/dnd/droptarget.scss index fbb800615..5a17b75f2 100644 --- a/packages/dockview-core/src/dnd/droptarget.scss +++ b/packages/dockview-core/src/dnd/droptarget.scss @@ -8,6 +8,7 @@ height: 100%; width: 100%; z-index: 10000; + pointer-events: none; > .drop-target-selection { position: relative; @@ -15,7 +16,9 @@ height: 100%; width: 100%; background-color: var(--dv-drag-over-background-color); - transition: top 70ms ease-out,left 70ms ease-out,width 70ms ease-out,height 70ms ease-out,opacity .15s ease-out; + transition: top 70ms ease-out, left 70ms ease-out, + width 70ms ease-out, height 70ms ease-out, + opacity 0.15s ease-out; will-change: transform; pointer-events: none; diff --git a/packages/dockview-core/src/dnd/droptarget.ts b/packages/dockview-core/src/dnd/droptarget.ts index a45cac380..7bccf6481 100644 --- a/packages/dockview-core/src/dnd/droptarget.ts +++ b/packages/dockview-core/src/dnd/droptarget.ts @@ -54,6 +54,17 @@ export type CanDisplayOverlay = | boolean | ((dragEvent: DragEvent, state: Position) => boolean); +const eventMarkTag = 'dv_droptarget_marked'; + +function markEvent(event: DragEvent): void { + (event as any)[eventMarkTag] = true; +} + +function isEventMarked(event: DragEvent) { + const value = (event as any)[eventMarkTag]; + return typeof value === 'boolean' && value; +} + export class Droptarget extends CompositeDisposable { private targetElement: HTMLElement | undefined; private overlayElement: HTMLElement | undefined; @@ -114,7 +125,7 @@ export class Droptarget extends CompositeDisposable { height ); - if (quadrant === null) { + if (isEventMarked(e) || quadrant === null) { // no drop target should be displayed this.removeDropTarget(); return; @@ -128,6 +139,8 @@ export class Droptarget extends CompositeDisposable { return; } + markEvent(e); + if (!this.targetElement) { this.targetElement = document.createElement('div'); this.targetElement.className = 'drop-target-dropzone';