diff --git a/packages/core/src/adapter/element-adapter.ts b/packages/core/src/adapter/element-adapter.ts index 11c9ef94..3d68d16c 100644 --- a/packages/core/src/adapter/element-adapter.ts +++ b/packages/core/src/adapter/element-adapter.ts @@ -1,6 +1,5 @@ import { bind } from 'bind-event-listener'; -import { getElementFromPointWithoutHoneypot } from '../honey-pot-fix/get-element-from-point-without-honey-pot'; import { makeHoneyPotFix } from '../honey-pot-fix/make-honey-pot-fix'; import { type AdapterAPI, @@ -132,7 +131,11 @@ const adapter = makeAdapter({ // the closest parent that is a draggable element will be marked as // the `event.target` for the event - const target: EventTarget | null = event.target; + const target = event + .composedPath() + .find( + (t): t is HTMLElement => t instanceof HTMLElement && draggableRegistry.has(t) + ); // this source is only for elements // Note: only HTMLElements can have the "draggable" attribute @@ -202,10 +205,11 @@ const adapter = makeAdapter({ // technically don't need this util, but just being // consistent with how we look up what is under the users // cursor. - const over = getElementFromPointWithoutHoneypot({ - x: input.clientX, - y: input.clientY, - }); + const dragHandleSource = target.getRootNode() as Document | ShadowRoot; + const over = dragHandleSource.elementFromPoint( + input.clientX, + input.clientY + ); // if we are not dragging from the drag handle (or something inside the drag handle) // then we will cancel the active drag diff --git a/packages/core/src/internal-types.ts b/packages/core/src/internal-types.ts index 786c963d..5c89153b 100644 --- a/packages/core/src/internal-types.ts +++ b/packages/core/src/internal-types.ts @@ -386,6 +386,7 @@ export type DropTargetAPI = { getIsOver: (args: { source: DragType['payload']; target: EventTarget | null; + event: Event; input: Input; current: DropTargetRecord[]; }) => DropTargetRecord[]; diff --git a/packages/core/src/ledger/lifecycle-manager.ts b/packages/core/src/ledger/lifecycle-manager.ts index 0764a80f..3bdff857 100644 --- a/packages/core/src/ledger/lifecycle-manager.ts +++ b/packages/core/src/ledger/lifecycle-manager.ts @@ -124,11 +124,12 @@ function start({ : event.target; const nextDropTargets = getDropTargetsOver({ - target, - input, - source: dragType.payload, - current: state.current.dropTargets, - }); + target, + event, + input, + source: dragType.payload, + current: state.current.dropTargets, + }); if (nextDropTargets.length) { // 🩸 must call `event.preventDefault()` to allow a browser drop to occur @@ -308,7 +309,7 @@ function start({ // as we will have already removed the event listener type: 'dragend', - listener(event) { + listener(event: DragEvent) { // In firefox, the position of the "dragend" event can // be a bit different to the last "dragover" event. // Updating the input so we can get the best possible @@ -374,6 +375,7 @@ function getStartLocation({ input, source: dragType.payload, target: event.target, + event, current: [], }); return { diff --git a/packages/core/src/make-adapter/make-drop-target.ts b/packages/core/src/make-adapter/make-drop-target.ts index 25728006..b7d469d4 100644 --- a/packages/core/src/make-adapter/make-drop-target.ts +++ b/packages/core/src/make-adapter/make-drop-target.ts @@ -77,16 +77,18 @@ export function makeDropTarget({ source, target, input, + event, result = [], }: { source: DragType['payload']; target: EventTarget | null; input: Input; + event: Event | undefined; result?: DropTargetRecord[]; }): DropTargetRecord[] { - if (target == null) { - return result; - } + if (event === undefined) { + return result; + } if (!(target instanceof Element)) { // For "text-selection" drags, the original `target` @@ -95,6 +97,7 @@ export function makeDropTarget({ if (target instanceof Node) { return getActualDropTargets({ source, + event, target: target.parentElement, input, result, @@ -134,6 +137,7 @@ export function makeDropTarget({ source, target: args.element.parentElement, input, + event, result, }); } @@ -155,6 +159,7 @@ export function makeDropTarget({ source, target: args.element.parentElement, input, + event, // Using bubble ordering. Same ordering as `event.getPath()` result: [...result, record], }); @@ -240,16 +245,19 @@ export function makeDropTarget({ source, target, input, + event, current, }: { source: DragType['payload']; target: EventTarget | null; input: Input; + event: Event | undefined; current: DropTargetRecord[]; }): DropTargetRecord[] { const actual: DropTargetRecord[] = getActualDropTargets({ source, target, + event, input, });