ngx-virtual-dnd 3.1.2 → 3.1.3

package/fesm2022/ngx-virtual-dnd.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, InjectionToken, computed, effect, Injectable, inject, NgZone, isDevMode, input, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, afterNextRender, viewChild, Directive, output, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { signal, InjectionToken, computed, effect, Injectable, inject, NgZone, input, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, afterNextRender, viewChild, Directive, isDevMode, output, untracked, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 
 /**
@@ -486,10 +486,14 @@ class DragStateService {
     #placeholderId = signal(null, ...(ngDevMode ? [{ debugName: "#placeholderId" }] : []));
     /** Index where the placeholder should be inserted — updated on each placeholder move */
     #placeholderIndex = signal(null, ...(ngDevMode ? [{ debugName: "#placeholderIndex" }] : []));
+    /** Snapshot captured synchronously immediately before the last drag state reset. */
+    #endedDragState = signal(null, ...(ngDevMode ? [{ debugName: "#endedDragState" }] : []));
     /** Flag indicating if the last drag was cancelled (not dropped) */
     #wasCancelled = signal(false, ...(ngDevMode ? [{ debugName: "#wasCancelled" }] : []));
     /** Whether the last drag was cancelled (for droppable to check before emitting drop) */
     wasCancelled = this.#wasCancelled.asReadonly();
+    /** Snapshot captured synchronously before the last drag reset. */
+    endedDragState = this.#endedDragState.asReadonly();
     /** Whether a drag operation is in progress */
     isDragging = computed(() => this.#state().isDragging, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
     /** The currently dragged item, or null */
@@ -546,7 +550,8 @@ class DragStateService {
      * Start a drag operation.
      */
     startDrag(item, cursorPosition, grabOffset, lockAxis, activeDroppableId, placeholderId, placeholderIndex, sourceIndex, isKeyboardDrag, axisLockPosition) {
-        // Reset cancellation flag at start of new drag
+        // Reset terminal drag metadata at start of new drag
+        this.#endedDragState.set(null);
         this.#wasCancelled.set(false);
         this.#cursorPosition.set(cursorPosition ?? null);
         this.#keyboardTargetIndex.set(isKeyboardDrag ? (sourceIndex ?? 0) : null);
@@ -616,6 +621,7 @@ class DragStateService {
      * End the drag operation and reset state (normal drop).
      */
     endDrag() {
+        this.#endedDragState.set(this.getStateSnapshot());
         this.#wasCancelled.set(false);
         this.#resetHighFrequencySignals();
         this.#state.set(INITIAL_CORE_STATE);
@@ -624,6 +630,7 @@ class DragStateService {
      * Cancel the drag operation (escape key, disabled, etc.).
      */
     cancelDrag() {
+        this.#endedDragState.set(this.getStateSnapshot());
         this.#wasCancelled.set(true);
         this.#resetHighFrequencySignals();
         this.#state.set(INITIAL_CORE_STATE);
@@ -739,6 +746,8 @@ class PositionCalculatorService {
     #DROPPABLE_ID_ATTR = 'data-droppable-id';
     /** Data attribute used to identify droppable groups */
     #DROPPABLE_GROUP_ATTR = 'data-droppable-group';
+    /** Data attribute reflecting a droppable's disabled state (present === disabled) */
+    #DROPPABLE_DISABLED_ATTR = 'data-droppable-disabled';
     /** Data attribute used to identify draggable elements */
     #DRAGGABLE_ID_ATTR = 'data-draggable-id';
     /** Maximum DOM levels to traverse when looking for parent elements */
@@ -766,10 +775,15 @@ class PositionCalculatorService {
         this.#session = {
             groupName,
             candidates,
-            rects: candidates.map((el) => el.getBoundingClientRect()),
+            rects: candidates.map((el) => this.#measureRect(el)),
             dirty: false,
+            candidatesStale: false,
             onViewportChange,
+            resizeObserver: this.#createResizeObserver(),
         };
+        // A container-only reflow (an element resize that fires no window scroll/resize)
+        // would otherwise leave stale rects — observe the candidates so it marks them dirty.
+        this.#observeCandidates(this.#session);
         // Capture-phase scroll catches scrolling on any ancestor scroller (scroll does
         // not bubble); resize covers viewport changes. Both only mark rects dirty —
         // the actual re-read is deferred to the next hit-test.
@@ -790,6 +804,7 @@ class PositionCalculatorService {
             return;
         }
         this.#session = null;
+        session.resizeObserver?.disconnect();
         if (typeof window !== 'undefined') {
             window.removeEventListener('scroll', session.onViewportChange, { capture: true });
             window.removeEventListener('resize', session.onViewportChange);
@@ -805,6 +820,39 @@ class PositionCalculatorService {
             this.#session.dirty = true;
         }
     }
+    /**
+     * Re-query the candidate droppable *list* for the active session and re-read their
+     * rects. Unlike {@link invalidateDroppableRects} (which only refreshes rects), this
+     * picks up droppables added or removed since the snapshot was captured at drag start —
+     * the frozen candidate list is otherwise blind to mid-drag mounts/unmounts.
+     *
+     * Safe to call when no session is active (no-op).
+     */
+    refreshCandidates() {
+        const session = this.#session;
+        if (!session) {
+            return;
+        }
+        session.candidates = this.#queryDroppables(session.groupName);
+        session.rects = session.candidates.map((el) => this.#measureRect(el));
+        session.dirty = false;
+        session.candidatesStale = false;
+        this.#observeCandidates(session);
+    }
+    /**
+     * Signal that the set of droppables for `groupName` may have changed (a droppable
+     * registered or unregistered mid-drag). Defers the actual re-query to the next
+     * hit-test — where a removed element is already gone from the DOM and a newly added
+     * one has its data attributes applied — keeping this notification path cheap.
+     *
+     * Called by {@link DroppableDirective} lifecycle hooks. No-op when the active session
+     * belongs to a different group or no session is active.
+     */
+    notifyCandidatesChanged(groupName) {
+        if (this.#session && this.#session.groupName === groupName) {
+            this.#session.candidatesStale = true;
+        }
+    }
     /**
      * Find the droppable element at a given point.
      *
@@ -823,9 +871,13 @@ class PositionCalculatorService {
     findDroppableAtPoint(x, y, _draggedElement, groupName) {
         const session = this.#session;
         if (session && session.groupName === groupName) {
-            if (session.dirty) {
+            if (session.candidatesStale) {
+                // A droppable was added/removed mid-drag: re-query the list (also refreshes rects).
+                this.refreshCandidates();
+            }
+            else if (session.dirty) {
                 for (let i = 0; i < session.candidates.length; i++) {
-                    session.rects[i] = session.candidates[i].getBoundingClientRect();
+                    session.rects[i] = this.#measureRect(session.candidates[i]);
                 }
                 session.dirty = false;
             }
@@ -833,7 +885,7 @@ class PositionCalculatorService {
         }
         // No active session: one-shot geometric query (still avoids elementFromPoint).
         const candidates = this.#queryDroppables(groupName);
-        const rects = candidates.map((el) => el.getBoundingClientRect());
+        const rects = candidates.map((el) => this.#measureRect(el));
         return this.#hitTest(x, y, candidates, rects);
     }
     /**
@@ -861,6 +913,11 @@ class PositionCalculatorService {
     }
     /**
      * Query all droppable elements belonging to a group, in document order.
+     *
+     * All group members are included — the disabled check happens per-frame in
+     * {@link #hitTest} rather than here, because a droppable can be disabled or
+     * re-enabled mid-drag (e.g. a consumer disabling incompatible targets from a
+     * `(dragStart)` handler, which fires AFTER the candidate snapshot is captured).
      */
     #queryDroppables(groupName) {
         if (typeof document === 'undefined') {
@@ -868,18 +925,88 @@ class PositionCalculatorService {
         }
         return queryAllByAttribute(document, this.#DROPPABLE_GROUP_ATTR, groupName);
     }
+    /**
+     * Measure a candidate's hit-test rect, clipped to its nearest `.vdnd-scrollable`
+     * ancestor. Without clipping a droppable scrolled mostly out of a clipping container
+     * still hit-tests over its full unclipped rect (issue #23 case 3). The intersection is
+     * built as a plain DOMRect; an empty intersection yields a negative width/height so the
+     * `#hitTest` bounds check can never match it.
+     */
+    #measureRect(el) {
+        const rect = el.getBoundingClientRect();
+        const scrollable = el.closest('.vdnd-scrollable');
+        if (!scrollable || scrollable === el) {
+            return rect;
+        }
+        const clip = scrollable.getBoundingClientRect();
+        const top = Math.max(rect.top, clip.top);
+        const left = Math.max(rect.left, clip.left);
+        const right = Math.min(rect.right, clip.right);
+        const bottom = Math.min(rect.bottom, clip.bottom);
+        return new DOMRect(left, top, right - left, bottom - top);
+    }
+    /**
+     * Create a ResizeObserver (run outside Angular per CLAUDE.md) that marks the session's
+     * cached rects dirty when a candidate resizes. Returns null when ResizeObserver is
+     * unavailable (SSR / jsdom) so callers degrade gracefully.
+     */
+    #createResizeObserver() {
+        if (typeof ResizeObserver === 'undefined') {
+            return null;
+        }
+        return this.#ngZone.runOutsideAngular(() => new ResizeObserver(() => {
+            if (this.#session) {
+                this.#session.dirty = true;
+            }
+        }));
+    }
+    /**
+     * Point the session's ResizeObserver at the current candidate list, dropping any
+     * previously observed elements. Called on session start and whenever the candidate
+     * list is refreshed.
+     */
+    #observeCandidates(session) {
+        const observer = session.resizeObserver;
+        if (!observer) {
+            return;
+        }
+        this.#ngZone.runOutsideAngular(() => {
+            observer.disconnect();
+            for (const candidate of session.candidates) {
+                observer.observe(candidate);
+            }
+        });
+    }
+    /**
+     * Whether a droppable element is currently disabled (reflected via the
+     * `data-droppable-disabled` attribute by `DroppableDirective`). Read live on each
+     * hit-test / navigation step so disabled↔enabled transitions during an active drag
+     * take effect immediately. Disabled droppables are excluded from all drag-time
+     * candidate sets — pointer hit-testing and keyboard cross-list navigation.
+     */
+    #isDroppableDisabled(el) {
+        return el.hasAttribute(this.#DROPPABLE_DISABLED_ATTR);
+    }
     /**
      * Geometric hit-test: return the last candidate (in document order) whose rect
      * contains the point. "Last in document order" reproduces the painter's-order
      * tie-break that `elementFromPoint` provided for free — a nested or later
      * overlapping droppable is painted on top of an earlier/ancestor one.
+     *
+     * Currently-disabled candidates are skipped here (not filtered from the snapshot) so
+     * that toggling `disabled` mid-drag takes effect on the very next frame. The check is
+     * a cheap `hasAttribute` read that does not force layout, keeping the loop hot.
      */
     #hitTest(x, y, candidates, rects) {
         let match = null;
         for (let i = 0; i < candidates.length; i++) {
+            const candidate = candidates[i];
+            if (this.#isDroppableDisabled(candidate)) {
+                continue;
+            }
             const r = rects[i];
             if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) {
-                match = candidates[i];
+                match = candidate;
             }
         }
         return match;
@@ -1018,12 +1145,15 @@ class PositionCalculatorService {
      * @returns Object with droppable info, or null if none found
      */
     findAdjacentDroppable(currentDroppableId, direction, groupName) {
-        // Find all droppables in the same group
+        // Include disabled droppables when establishing left-to-right order and locating the
+        // current container — otherwise a container disabled mid-drag (its own index becomes
+        // -1) would trap the drag with no reachable neighbour. Disabled droppables are skipped
+        // as *targets* during the outward scan below instead.
         const allDroppables = queryAllByAttribute(document, this.#DROPPABLE_GROUP_ATTR, groupName);
         if (allDroppables.length <= 1) {
             return null;
         }
-        // Get bounding rects and IDs, sorted by X position
+        // Get bounding rects, IDs, and disabled state, sorted by X position
         const droppableInfos = [];
         allDroppables.forEach((el) => {
             const htmlEl = el;
@@ -1033,56 +1163,41 @@ class PositionCalculatorService {
                     element: htmlEl,
                     id,
                     rect: htmlEl.getBoundingClientRect(),
+                    disabled: this.#isDroppableDisabled(htmlEl),
                 });
             }
         });
         // Sort by X position (left to right)
         droppableInfos.sort((a, b) => a.rect.left - b.rect.left);
-        // Find current droppable index
+        // Find current droppable index (among all, including a now-disabled current container)
         const currentIndex = droppableInfos.findIndex((d) => d.id === currentDroppableId);
         if (currentIndex === -1) {
             return null;
         }
-        // Get the adjacent droppable
-        const targetIndex = direction === 'left' ? currentIndex - 1 : currentIndex + 1;
-        if (targetIndex < 0 || targetIndex >= droppableInfos.length) {
-            return null;
+        // Scan outward in the requested direction, skipping disabled droppables, until the
+        // first enabled neighbour (or run off the end of the list).
+        const step = direction === 'left' ? -1 : 1;
+        for (let i = currentIndex + step; i >= 0 && i < droppableInfos.length; i += step) {
+            const target = droppableInfos[i];
+            if (target.disabled) {
+                continue;
+            }
+            return {
+                element: target.element,
+                id: target.id,
+            };
         }
-        const target = droppableInfos[targetIndex];
-        // Get item count from the target droppable
-        const itemCount = this.#getDroppableItemCount(target.element);
-        return {
-            element: target.element,
-            id: target.id,
-            itemCount,
-        };
+        return null;
     }
     /**
-     * Get the total item count in a droppable.
-     * Uses spacer height and data attributes if available, otherwise counts DOM elements.
+     * Whether the droppable with the given ID is currently disabled. A droppable that cannot
+     * be found is reported as disabled (treat missing as not a valid target). Used to
+     * revalidate a keyboard drag's active target at drop time, since it may have been disabled
+     * after the drag navigated into it.
      */
-    #getDroppableItemCount(droppableElement) {
-        const virtualScroll = droppableElement.querySelector('vdnd-virtual-scroll');
-        if (virtualScroll) {
-            const configuredHeight = virtualScroll.getAttribute('data-item-height');
-            if (!configuredHeight) {
-                if (isDevMode()) {
-                    console.error('[ngx-virtual-dnd] vdnd-virtual-scroll requires data-item-height attribute ' +
-                        'for keyboard navigation. Cross-list keyboard drag will not work correctly.');
-                }
-                // Short-circuit: return 0 to prevent navigation to this droppable
-                return 0;
-            }
-            // Prefer spacer height over scrollHeight for accuracy
-            const spacer = virtualScroll.querySelector('.vdnd-virtual-scroll-spacer');
-            const totalHeight = spacer
-                ? parseFloat(spacer.style.height) || 0
-                : virtualScroll.scrollHeight;
-            const itemHeight = parseInt(configuredHeight, 10);
-            return Math.floor(totalHeight / itemHeight);
-        }
-        // Fallback for non-virtual scroll: DOM count is valid
-        return droppableElement.querySelectorAll(`[${this.#DRAGGABLE_ID_ATTR}]`).length;
+    isDroppableDisabledById(id) {
+        const element = this.getDroppableById(id);
+        return element === null || this.#isDroppableDisabled(element);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PositionCalculatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PositionCalculatorService, providedIn: 'root' });
@@ -1219,6 +1334,9 @@ const DEFAULT_CONFIG = {
     maxSpeed: 15,
     accelerate: true,
 };
+const BASE_FRAME_DURATION_MS = 1000 / 60;
+const MIN_SCROLL_FRAME_SCALE = 1;
+const MAX_SCROLL_FRAME_SCALE = 6;
 /**
  * Service that handles auto-scrolling when dragging near container edges.
  */
@@ -1228,6 +1346,13 @@ class AutoScrollService {
     #scheduler = inject(DragSchedulerService);
     /** Currently registered scrollable containers */
     #scrollableContainers = new Map();
+    /**
+     * Candidate containers ordered innermost (deepest in the DOM) first, so a
+     * nested scrollable wins over its ancestors under the cursor. Rebuilt lazily
+     * whenever registrations change (containers rarely move mid-drag) and once per
+     * drag (see startMonitoring), not per frame.
+     */
+    #orderedContainers = null;
     /** Bound reference to #participantTick for stable add/remove with the scheduler. */
     #boundParticipantTick = () => this.#participantTick();
     /** Callback to invoke when scrolling occurs (for placeholder recalculation) */
@@ -1237,6 +1362,12 @@ class AutoScrollService {
     /** Last tick cursor position for stationary detection */
     #lastTickCursorX = NaN;
     #lastTickCursorY = NaN;
+    /**
+     * Last timestamp used to scale per-frame autoscroll distance by elapsed frame time.
+     * Scale is intentionally floored at 1 to preserve the existing feel on 60fps+ displays while
+     * compensating slower frames that would otherwise under-scroll.
+     */
+    #lastScrollTimestamp = 0;
     /** Reusable direction object for tick loop (avoids per-frame allocation) */
     #tickDirection = { x: 0, y: 0 };
     /** Current scroll state */
@@ -1253,12 +1384,61 @@ class AutoScrollService {
             element,
             config: { ...DEFAULT_CONFIG, ...config },
         });
+        this.#orderedContainers = null;
     }
     /**
      * Unregister a scrollable container.
      */
     unregisterContainer(id) {
         this.#scrollableContainers.delete(id);
+        this.#orderedContainers = null;
+    }
+    /**
+     * Build (or reuse) the candidate list ordered innermost-first by DOM depth.
+     *
+     * Sorting by absolute DOM depth (descending) is a *total* order, unlike an
+     * `element.contains()` comparator which returns 0 for unrelated pairs and so
+     * violates transitivity — with ≥3 containers a nested pair separated by an
+     * unrelated one in registration order could end up never compared, leaving the
+     * ancestor ahead of its descendant. Equal-depth (including unrelated) containers
+     * keep registration order via the stable sort, so unrelated lists behave as before.
+     */
+    #getOrderedContainers() {
+        if (this.#orderedContainers) {
+            return this.#orderedContainers;
+        }
+        const entries = [];
+        for (const [id, { element, config }] of this.#scrollableContainers) {
+            // Registration is unconditional (directives can't expose DOM size as a signal, so
+            // gating registration on it goes stale — see #27). Filter by live scroll geometry
+            // here instead: this list is rebuilt per drag (startMonitoring nulls the cache) and
+            // on register/unregister, so a container that grew scrollable after init is picked
+            // up on the next drag, and one that shrank stops occupying a candidate slot.
+            if (!this.#isScrollable(element)) {
+                continue;
+            }
+            entries.push({ id, element, config, depth: this.#domDepth(element) });
+        }
+        // Deepest first; stable sort keeps registration order on ties.
+        entries.sort((a, b) => b.depth - a.depth);
+        this.#orderedContainers = entries;
+        return entries;
+    }
+    /**
+     * Whether the element currently has room to scroll on either axis. Read fresh each
+     * time the candidate list is (re)built — never cached — so it always reflects the
+     * live layout at drag start rather than a stale value captured at registration.
+     */
+    #isScrollable(element) {
+        return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+    }
+    /** Number of ancestor elements — the element's absolute depth in the DOM tree. */
+    #domDepth(element) {
+        let depth = 0;
+        for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+            depth++;
+        }
+        return depth;
     }
     /**
      * Start monitoring for auto-scroll.
@@ -1268,6 +1448,10 @@ class AutoScrollService {
      */
     startMonitoring(onScroll) {
         this.#onScrollCallback = onScroll ?? null;
+        // Recompute containment ordering fresh per drag: a registered container may have
+        // been reparented (portal/DOM move) since the cache was built, which register/
+        // unregister alone wouldn't catch.
+        this.#orderedContainers = null;
         this.#scheduler.addParticipant(this.#boundParticipantTick);
     }
     /**
@@ -1281,6 +1465,7 @@ class AutoScrollService {
         this.#cursorOverride = null;
         this.#lastTickCursorX = NaN;
         this.#lastTickCursorY = NaN;
+        this.#lastScrollTimestamp = 0;
         this.#scrollState.containerId = null;
         this.#scrollState.direction.x = 0;
         this.#scrollState.direction.y = 0;
@@ -1317,7 +1502,12 @@ class AutoScrollService {
         this.#lastTickCursorX = cursor.x;
         this.#lastTickCursorY = cursor.y;
         let scrollPerformed = false;
-        for (const [id, { element, config }] of this.#scrollableContainers) {
+        // Frame scale is shared across candidates within a tick; computed lazily on
+        // the first scroll attempt so stationary/idle frames don't advance the clock.
+        let frameScale = 0;
+        // Candidates are ordered innermost-first: when the deepest container under the
+        // cursor is exhausted at its boundary, the loop falls through to its ancestors.
+        for (const { id, element, config } of this.#getOrderedContainers()) {
             const rect = element.getBoundingClientRect();
             const isInside = this.#positionCalculator.isInsideContainer(cursor, rect);
             if (!isInside) {
@@ -1351,16 +1541,31 @@ class AutoScrollService {
                     const distanceRatio = maxDistance / config.threshold;
                     speed = Math.min(config.maxSpeed, Math.max(1, config.maxSpeed * distanceRatio));
                 }
-                this.#scrollState.containerId = id;
-                this.#scrollState.direction.x = direction.x;
-                this.#scrollState.direction.y = direction.y;
-                this.#scrollState.speed = speed;
-                this.#performScroll(element, direction, speed);
-                scrollPerformed = true;
-                break;
+                if (frameScale === 0) {
+                    frameScale = this.#getFrameScale();
+                }
+                // #performScroll reports whether it actually moved the element. Only claim the
+                // tick (and stop descending the candidate list) when a scroll really happened —
+                // an exhausted container must not block its ancestors from scrolling.
+                //
+                // Axis independence is per-container: if this container scrolls on *either* axis
+                // it claims the whole tick, so a corner where the inner container's Y is exhausted
+                // but its X still moves will not additionally apply an ancestor's available Y that
+                // same frame. This matches the issue's "break once a container scrolled" contract;
+                // cross-container axis handoff is intentionally out of scope.
+                const scrolled = this.#performScroll(element, direction, frameScale, speed);
+                if (scrolled) {
+                    this.#scrollState.containerId = id;
+                    this.#scrollState.direction.x = direction.x;
+                    this.#scrollState.direction.y = direction.y;
+                    this.#scrollState.speed = speed;
+                    scrollPerformed = true;
+                    break;
+                }
             }
         }
         if (!scrollPerformed) {
+            this.#lastScrollTimestamp = 0;
             this.#scrollState.containerId = null;
             this.#scrollState.direction.x = 0;
             this.#scrollState.direction.y = 0;
@@ -1369,32 +1574,55 @@ class AutoScrollService {
     }
     /**
      * Perform the actual scroll operation.
-     */
-    #performScroll(element, direction, speed) {
-        const scrollX = direction.x * speed;
-        const scrollY = direction.y * speed;
-        // Check bounds before scrolling
+     *
+     * Each axis is evaluated independently: a boundary-exhausted axis is skipped
+     * while the other axis still scrolls (e.g. at a corner where vertical is
+     * maxed out but horizontal is available).
+     *
+     * @returns `true` when at least one axis actually scrolled, `false` when the
+     *   element was already at its boundary in every requested direction. The
+     *   caller uses this to fall through to ancestor containers.
+     */
+    #performScroll(element, direction, frameScale, speed) {
+        const scrollX = direction.x * speed * frameScale;
+        const scrollY = direction.y * speed * frameScale;
+        // Integer bounds used only as a cheap fast path to skip the assignment.
+        // scrollHeight/clientHeight are rounded integers while scrollTop is fractional on
+        // WebKit and any non-integer zoom/DPR, so this max can overstate the true one by
+        // up to ~1px. It must NOT decide whether a scroll happened — the browser clamps the
+        // assignment, so a before/after comparison is the only reliable truth signal.
+        // Without it, an element pinned at its fractional max reports `scrolled = true`,
+        // permanently claims the tick (blocking ancestor fall-through) and fires the callback
+        // every frame against unchanged offsets (the WebKit placeholder-drift family).
         const maxScrollY = element.scrollHeight - element.clientHeight;
         const maxScrollX = element.scrollWidth - element.clientWidth;
-        if (direction.y < 0 && element.scrollTop <= 0) {
-            return;
-        }
-        if (direction.y > 0 && element.scrollTop >= maxScrollY) {
-            return;
-        }
-        if (direction.x < 0 && element.scrollLeft <= 0) {
-            return;
-        }
-        if (direction.x > 0 && element.scrollLeft >= maxScrollX) {
-            return;
-        }
+        let scrolled = false;
         // Use direct property assignment for guaranteed synchronous scroll
         // scrollBy() with 'instant' behavior may have async issues in Safari
         if (scrollY !== 0) {
-            element.scrollTop += scrollY;
+            const canScrollUp = direction.y < 0 && element.scrollTop > 0;
+            const canScrollDown = direction.y > 0 && element.scrollTop < maxScrollY;
+            if (canScrollUp || canScrollDown) {
+                const before = element.scrollTop;
+                element.scrollTop += scrollY;
+                if (element.scrollTop !== before) {
+                    scrolled = true;
+                }
+            }
         }
         if (scrollX !== 0) {
-            element.scrollLeft += scrollX;
+            const canScrollLeft = direction.x < 0 && element.scrollLeft > 0;
+            const canScrollRight = direction.x > 0 && element.scrollLeft < maxScrollX;
+            if (canScrollLeft || canScrollRight) {
+                const before = element.scrollLeft;
+                element.scrollLeft += scrollX;
+                if (element.scrollLeft !== before) {
+                    scrolled = true;
+                }
+            }
+        }
+        if (!scrolled) {
+            return false;
         }
         // Notify callback IMMEDIATELY in the same frame (no RAF delay)
         // Delaying via RAF causes cumulative drift during continuous autoscroll
@@ -1402,6 +1630,13 @@ class AutoScrollService {
         // Note: No ngZone.run() needed here - the callback (DraggableDirective.#recalculatePlaceholder)
         // already enters the zone when updating drag state.
         this.#onScrollCallback?.();
+        return true;
+    }
+    #getFrameScale() {
+        const now = performance.now();
+        const elapsedMs = this.#lastScrollTimestamp === 0 ? BASE_FRAME_DURATION_MS : now - this.#lastScrollTimestamp;
+        this.#lastScrollTimestamp = now;
+        return Math.min(Math.max(elapsedMs / BASE_FRAME_DURATION_MS, MIN_SCROLL_FRAME_SCALE), MAX_SCROLL_FRAME_SCALE);
     }
     /**
      * Check if auto-scrolling is currently active.
@@ -3157,6 +3392,18 @@ function createEffectiveGroupSignal(options) {
     });
 }
 
+function normalizeDropDestinationIndex({ sourceIndex, placeholderIndex, sourceDroppableId, activeDroppableId, }) {
+    if (placeholderIndex === null) {
+        return null;
+    }
+    if (sourceDroppableId !== null &&
+        sourceDroppableId === activeDroppableId &&
+        sourceIndex < placeholderIndex) {
+        return placeholderIndex - 1;
+    }
+    return placeholderIndex;
+}
+
 /**
  * Marks an element as a valid drop target within the virtual scroll drag-and-drop system.
  *
@@ -3182,6 +3429,7 @@ class DroppableDirective {
     #elementRef = inject((ElementRef));
     #dragState = inject(DragStateService);
     #autoScroll = inject(AutoScrollService);
+    #positionCalculator = inject(PositionCalculatorService);
     #parentGroup = inject(VDND_GROUP_TOKEN, { optional: true });
     /** Unique identifier for this droppable */
     vdndDroppable = input.required(...(ngDevMode ? [{ debugName: "vdndDroppable" }] : []));
@@ -3225,29 +3473,14 @@ class DroppableDirective {
         }
         return this.#dragState.placeholderId();
     }, ...(ngDevMode ? [{ debugName: "placeholderId" }] : []));
-    /** Track previous active state for cache clearing on leave */
+    /** Track previous active state to detect the drag-end transition */
     #wasActive = false;
-    /** Cached state for handling drop (since state is cleared before effect fires) */
-    #cachedDragState = null;
-    /**
-     * Check if this element is actually scrollable.
-     */
-    #isScrollable() {
-        const el = this.#elementRef.nativeElement;
-        const style = window.getComputedStyle(el);
-        const overflowY = style.overflowY;
-        const overflowX = style.overflowX;
-        // Check if overflow allows scrolling
-        const hasScrollableOverflow = overflowY === 'auto' ||
-            overflowY === 'scroll' ||
-            overflowX === 'auto' ||
-            overflowX === 'scroll';
-        if (!hasScrollableOverflow) {
-            return false;
-        }
-        // Check if content is larger than container
-        return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-    }
+    /**
+     * The terminal drag snapshot this droppable has already processed. `endedDragState`
+     * persists until the next drag starts, so this guards against replaying the same drop
+     * when the effect re-runs (e.g. `disabled()` toggling) after the drag has ended.
+     */
+    #handledEndedState = null;
     constructor() {
         createAutoScrollRegistration({
             autoScrollService: this.#autoScroll,
@@ -3255,29 +3488,51 @@ class DroppableDirective {
             getId: () => this.vdndDroppable(),
             enabled: () => this.autoScrollEnabled(),
             config: () => this.autoScrollConfig(),
-            canRegister: () => Boolean(this.effectiveGroup()) && this.#isScrollable(),
+            // Register whenever a group is resolved; do NOT gate on scrollability. DOM size is
+            // not reactive, so a list that becomes scrollable after init (async data, resize)
+            // would never register. AutoScrollService filters by live scroll geometry per drag.
+            canRegister: () => Boolean(this.effectiveGroup()),
         });
-        // React to state changes and handle drop events
+        // Notify the calculator once this droppable is rendered (host data attributes applied).
+        // Matters when it mounts DURING an active drag — the candidate snapshot was frozen at
+        // drag start, so without this a conditionally rendered list would never become a target.
+        afterNextRender(() => {
+            const group = this.effectiveGroup();
+            if (group) {
+                this.#positionCalculator.notifyCandidatesChanged(group);
+            }
+        });
+        // React to state changes and handle drop events.
+        //
+        // Keyed only on the low-frequency fields (isActive/isDragging/draggedItem). The final
+        // placeholder/index values #handleDrop needs are captured by DragStateService.endDrag()
+        // into endedDragState() at the drag-end boundary, so this effect never has to poll the
+        // high-frequency cursor/placeholder signals — reading them here would make it re-run and
+        // re-allocate a snapshot on every 60fps frame, defeating the service's signal splitting.
         effect(() => {
             const active = this.isActive();
             const draggedItem = this.#dragState.draggedItem();
             const isDragging = this.#dragState.isDragging();
-            // Cache state while active for use during drop handling
-            if (active && isDragging && draggedItem) {
-                this.#cachedDragState = this.#dragState.getStateSnapshot();
-            }
-            // Handle drag end (drop)
-            if (!isDragging && this.#wasActive && draggedItem === null) {
-                // Check if drag was cancelled (e.g., Escape key)
-                if (!this.#dragState.wasCancelled()) {
-                    // Drag ended normally - this is a drop
-                    this.#handleDrop();
+            // Handle drag end (drop). This droppable is the release target when it was either
+            // observed active during the drag (#wasActive) OR named as the target in the ended
+            // drag snapshot. The snapshot path covers the pointer-up flush, where the final
+            // position is processed and the state cleared in the same synchronous task, so this
+            // effect never observes isActive() === true mid-drag and #wasActive stays false.
+            const endedState = untracked(() => this.#dragState.endedDragState());
+            const endedTargetedThis = endedState?.activeDroppableId === this.vdndDroppable();
+            if (!isDragging && draggedItem === null && (this.#wasActive || endedTargetedThis)) {
+                // Consume each terminal snapshot exactly once. endedDragState persists until the
+                // next drag starts and disabled()/other inputs re-run this effect, so without a
+                // per-snapshot guard a later state change would replay the same historical drop.
+                if (endedState !== this.#handledEndedState) {
+                    this.#handledEndedState = endedState;
+                    // Emit only for an enabled target that ended normally. A target disabled at
+                    // release still consumes the snapshot (so re-enabling can't resurrect the drop)
+                    // but emits nothing, keeping dragEnd and drop consistent.
+                    if (!this.disabled() && !this.#dragState.wasCancelled()) {
+                        this.#handleDrop();
+                    }
                 }
-                this.#cachedDragState = null;
-            }
-            // Clear cached state when leaving without dropping
-            if (!active && this.#wasActive && isDragging) {
-                this.#cachedDragState = null;
             }
             this.#wasActive = active;
         });
@@ -3289,13 +3544,20 @@ class DroppableDirective {
         }
         // Unregister from auto-scroll
         this.#autoScroll.unregisterContainer(this.vdndDroppable());
+        // If this droppable unmounts mid-drag, tell the calculator so it drops it from the
+        // frozen candidate list (deferred re-query runs once the element has left the DOM).
+        const group = untracked(() => this.effectiveGroup());
+        if (group) {
+            this.#positionCalculator.notifyCandidatesChanged(group);
+        }
     }
     /**
      * Handle a drop on this droppable.
      */
     #handleDrop() {
-        // Use cached state since the actual state is cleared before this effect fires
-        const state = this.#cachedDragState;
+        // The live state is cleared before this effect fires, so read the terminal snapshot
+        // captured by endDrag()/cancelDrag() immediately before the reset.
+        const state = untracked(() => this.#dragState.endedDragState());
         if (!state?.draggedItem || state.activeDroppableId !== this.vdndDroppable()) {
             return;
         }
@@ -3306,16 +3568,17 @@ class DroppableDirective {
         // be in the DOM after autoscroll (it gets virtualized out of view)
         const sourceIndex = state.sourceIndex ?? this.#getItemIndex(state.draggedItem.draggableId, sourceDroppableId);
         // Use the pre-calculated placeholderIndex if available (more reliable)
-        // Fall back to DOM-based calculation if not
-        let destinationIndex = state.placeholderIndex !== null && state.placeholderIndex !== undefined
+        // Fall back to DOM-based calculation if not. Then normalize to the same
+        // consumer-facing insertion index emitted by DragEndEvent.
+        const placeholderIndex = state.placeholderIndex !== null && state.placeholderIndex !== undefined
             ? state.placeholderIndex
             : this.#getDestinationIndex(placeholderId);
-        // Adjust for same-list reordering: if moving within the same list and
-        // the destination is after the source, we need to account for the item
-        // being removed from its original position
-        if (sourceDroppableId === this.vdndDroppable() && sourceIndex < destinationIndex) {
-            destinationIndex--;
-        }
+        const destinationIndex = normalizeDropDestinationIndex({
+            sourceIndex,
+            placeholderIndex,
+            sourceDroppableId,
+            activeDroppableId: this.vdndDroppable(),
+        });
         this.drop.emit({
             source: {
                 draggableId: state.draggedItem.draggableId,
@@ -3391,7 +3654,7 @@ class DroppableDirective {
         return this.#elementRef.nativeElement.scrollHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DroppableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DroppableDirective, isStandalone: true, selector: "[vdndDroppable]", inputs: { vdndDroppable: { classPropertyName: "vdndDroppable", publicName: "vdndDroppable", isSignal: true, isRequired: true, transformFunction: null }, vdndDroppableGroup: { classPropertyName: "vdndDroppableGroup", publicName: "vdndDroppableGroup", isSignal: true, isRequired: false, transformFunction: null }, vdndDroppableData: { classPropertyName: "vdndDroppableData", publicName: "vdndDroppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, constrainToContainer: { classPropertyName: "constrainToContainer", publicName: "constrainToContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drop: "drop" }, host: { properties: { "attr.data-droppable-id": "vdndDroppable()", "attr.data-droppable-group": "effectiveGroup()", "attr.data-constrain-to-container": "constrainToContainer() || null", "attr.aria-dropeffect": "\"move\"", "class.vdnd-droppable": "true", "class.vdnd-droppable-active": "isActive()", "class.vdnd-droppable-disabled": "disabled()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DroppableDirective, isStandalone: true, selector: "[vdndDroppable]", inputs: { vdndDroppable: { classPropertyName: "vdndDroppable", publicName: "vdndDroppable", isSignal: true, isRequired: true, transformFunction: null }, vdndDroppableGroup: { classPropertyName: "vdndDroppableGroup", publicName: "vdndDroppableGroup", isSignal: true, isRequired: false, transformFunction: null }, vdndDroppableData: { classPropertyName: "vdndDroppableData", publicName: "vdndDroppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, constrainToContainer: { classPropertyName: "constrainToContainer", publicName: "constrainToContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drop: "drop" }, host: { properties: { "attr.data-droppable-id": "vdndDroppable()", "attr.data-droppable-group": "effectiveGroup()", "attr.data-droppable-disabled": "disabled() || null", "attr.data-constrain-to-container": "constrainToContainer() || null", "attr.aria-dropeffect": "\"move\"", "class.vdnd-droppable": "true", "class.vdnd-droppable-active": "isActive()", "class.vdnd-droppable-disabled": "disabled()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DroppableDirective, decorators: [{
             type: Directive,
@@ -3400,6 +3663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     host: {
                         '[attr.data-droppable-id]': 'vdndDroppable()',
                         '[attr.data-droppable-group]': 'effectiveGroup()',
+                        '[attr.data-droppable-disabled]': 'disabled() || null',
                         '[attr.data-constrain-to-container]': 'constrainToContainer() || null',
                         '[attr.aria-dropeffect]': '"move"',
                         '[class.vdnd-droppable]': 'true',
@@ -4113,36 +4377,46 @@ class KeyboardDragHandler {
     /**
      * Unified key dispatch. Returns true if the key was handled.
      * Used by both host bindings and the document-level listener.
+     *
+     * Handled keys are consumed entirely (preventDefault + stopPropagation): right after pickup
+     * the source element can still be focused because Angular has not applied display:none yet,
+     * and without stopping propagation the same keydown would be processed by both the element's
+     * host binding and the document-level listener — moving the item two positions per press.
      */
     handleKey(event) {
         if (!this.isActive()) {
             return false;
         }
-        switch (event.key) {
+        const handled = this.#dispatchKey(event.key);
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        return handled;
+    }
+    /**
+     * Execute the drag action for a key. Returns true if the key maps to an action.
+     */
+    #dispatchKey(key) {
+        switch (key) {
             case ' ': // Space
             case 'Enter':
-                event.preventDefault();
                 this.complete();
                 return true;
             case 'Escape':
             case 'Tab':
-                event.preventDefault();
                 this.cancel();
                 return true;
             case 'ArrowUp':
-                event.preventDefault();
                 this.#deps.keyboardDrag.moveUp();
                 return true;
             case 'ArrowDown':
-                event.preventDefault();
                 this.#deps.keyboardDrag.moveDown();
                 return true;
             case 'ArrowLeft':
-                event.preventDefault();
                 this.#moveToAdjacentDroppable('left');
                 return true;
             case 'ArrowRight':
-                event.preventDefault();
                 this.#moveToAdjacentDroppable('right');
                 return true;
             default:
@@ -4155,7 +4429,21 @@ class KeyboardDragHandler {
     complete() {
         const ctx = this.#deps.getContext();
         const sourceIndex = this.#deps.dragState.sourceIndex() ?? 0;
-        const destinationIndex = this.#deps.dragState.placeholderIndex();
+        const activeDroppableId = this.#deps.dragState.activeDroppableId();
+        // Revalidate the active target: it may have been disabled after the drag navigated
+        // into it. A disabled (or missing) target is not a valid drop — report no destination.
+        // The droppable's own disabled guard suppresses the drop event, keeping dragEnd and
+        // drop consistent (non-cancelled dragEnd with destinationIndex: null, no drop).
+        const hasValidTarget = activeDroppableId !== null &&
+            !this.#deps.positionCalculator.isDroppableDisabledById(activeDroppableId);
+        const destinationIndex = hasValidTarget
+            ? normalizeDropDestinationIndex({
+                sourceIndex,
+                placeholderIndex: this.#deps.dragState.placeholderIndex(),
+                sourceDroppableId: this.#deps.dragState.sourceDroppableId(),
+                activeDroppableId,
+            })
+            : null;
         // Remove document listener
         this.#cleanupDocumentListener();
         // Clear droppable metadata cache from this drag session
@@ -4243,10 +4531,19 @@ class KeyboardDragHandler {
         if (!adjacent) {
             return;
         }
+        // Derive the destination list's item count from DragIndexCalculatorService — the single
+        // source of truth that correctly handles registered strategies, dynamic-height lists, and
+        // vdnd-virtual-content (page-scroll) lists. Arrowing back to the origin lands on the source
+        // list, so compute isSameList rather than assuming a distinct target.
+        const itemCount = this.#deps.dragIndexCalculator.getTotalItemCount({
+            droppableElement: adjacent.element,
+            isSameList: adjacent.id === this.#deps.dragState.sourceDroppableId(),
+            draggedItemHeight: this.#deps.dragState.draggedItem()?.height ?? 0,
+        });
         // Maintain the current target index (clamped to the new list's size)
         const currentTargetIndex = this.#deps.keyboardDrag.targetIndex() ?? 0;
-        const targetIndex = Math.min(currentTargetIndex, adjacent.itemCount);
-        this.#deps.keyboardDrag.moveToDroppable(adjacent.id, targetIndex, adjacent.itemCount);
+        const targetIndex = Math.min(currentTargetIndex, itemCount);
+        this.#deps.keyboardDrag.moveToDroppable(adjacent.id, targetIndex, itemCount);
     }
     /**
      * Document-level keydown listener active during keyboard drag.
@@ -4553,7 +4850,12 @@ class DraggableDirective {
      * Set to 0 for immediate drag (default behavior).
      */
     dragDelay = input(0, ...(ngDevMode ? [{ debugName: "dragDelay" }] : []));
-    /** Lock dragging to a single axis ('x' = horizontal only, 'y' = vertical only) */
+    /**
+     * Lock dragging by freezing one axis. The value names the axis that stays
+     * fixed: `'x'` freezes the X coordinate (vertical-only movement), `'y'`
+     * freezes the Y coordinate (horizontal-only movement). `null` allows free
+     * movement. Note: this is the opposite of Angular CDK's `cdkDragLockAxis`.
+     */
     lockAxis = input(null, ...(ngDevMode ? [{ debugName: "lockAxis" }] : []));
     /** Emits when drag starts */
     dragStart = output();
@@ -4732,7 +5034,6 @@ class DraggableDirective {
         const clonedElement = this.#overlayContainer.hasTemplatePreview()
             ? undefined
             : this.#elementClone.cloneElement(element);
-        const parentDroppableId = this.#getParentDroppableId();
         // Find droppable and calculate initial placeholder position
         // This fixes the UI glitch by ensuring placeholder is set before the element is hidden
         const groupName = this.#effectiveGroup();
@@ -4741,6 +5042,10 @@ class DraggableDirective {
             this.#pointerHandler.cleanup();
             return;
         }
+        const parentDroppableElement = this.#positionCalculator.getDroppableParent(element, groupName);
+        const parentDroppableId = parentDroppableElement
+            ? this.#positionCalculator.getDroppableId(parentDroppableElement)
+            : null;
         // Snapshot droppable rects for this drag session so subsequent hit-testing is
         // pure geometry (no elementFromPoint layout flush per pointermove).
         this.#positionCalculator.beginDragSession(groupName);
@@ -4756,7 +5061,7 @@ class DraggableDirective {
             : parentDroppableId;
         // Calculate source index BEFORE the element is hidden (display: none)
         // This is critical because getBoundingClientRect() returns all zeros for hidden elements
-        const sourceIndex = this.#calculateSourceIndex(element, droppableElement);
+        const sourceIndex = this.#calculateSourceIndex(element, parentDroppableElement);
         let initialPlaceholderId = null;
         let initialPlaceholderIndex = null;
         if (droppableElement) {
@@ -4852,10 +5157,24 @@ class DraggableDirective {
                 return strategy.findIndexAtOffset(relativeY);
             }
         }
-        // Fallback: Use fixed-height math if no strategy available
-        const itemHeight = rect.height || 50;
-        const relativeY = rect.top - containerRect.top + scrollTop;
-        return Math.round(relativeY / itemHeight);
+        // Preserve the geometry fallback for a virtual container whose strategy is unavailable.
+        if (virtualScroll || virtualContent) {
+            const itemHeight = rect.height || 50;
+            const relativeY = rect.top - containerRect.top + scrollTop;
+            return Math.round(relativeY / itemHeight);
+        }
+        // Non-virtual fallback: derive the logical index from preceding draggable siblings.
+        // Geometry-based division is incorrect when the list has padding, gaps, margins,
+        // or variable-height items.
+        let sourceIndex = 0;
+        let sibling = element.previousElementSibling;
+        while (sibling) {
+            if (sibling.matches('[data-draggable-id]')) {
+                sourceIndex++;
+            }
+            sibling = sibling.previousElementSibling;
+        }
+        return sourceIndex;
     }
     /**
      * Recalculate placeholder position (called during auto-scroll).
@@ -5001,6 +5320,16 @@ class DraggableDirective {
      * End the drag operation.
      */
     #endDrag(cancelled) {
+        // Flush the final pointer position for a real drop. Pointer moves only QUEUE a cursor
+        // for the next RAF tick; on release the scheduler is stopped below and any un-processed
+        // cursor is discarded, so without this the drop would resolve against the last
+        // RAF-PROCESSED position — a release that just entered a different (e.g. newly disabled)
+        // droppable could otherwise land on the previously-targeted one. Guarded on group
+        // presence so it never re-enters #endDrag via #updateDrag's group-lost cancel path.
+        // Cancels skip this: their destination is intentionally null.
+        if (!cancelled && this.#lastRawPosition && this.isDragging() && this.#effectiveGroup()) {
+            this.#updateDrag(this.#lastRawPosition);
+        }
         // Stop the scheduler RAF loop first, then remove the autoscroll participant.
         this.#scheduler.stop();
         this.#autoScroll.stopMonitoring();
@@ -5013,20 +5342,14 @@ class DraggableDirective {
         this.#constraintElement = null;
         this.#lastRawPosition = null;
         const sourceIndex = this.#dragState.sourceIndex() ?? 0;
-        const placeholderIndex = this.#dragState.placeholderIndex();
-        let destinationIndex = cancelled ? null : placeholderIndex;
-        // Keep DragEndEvent semantics consistent with DropEvent.destination.index.
-        // During same-list drag, placeholderIndex includes the hidden-item adjustment,
-        // but the final insertion index must account for removal of the source item.
-        if (!cancelled && placeholderIndex !== null) {
-            const sourceDroppableId = this.#dragState.sourceDroppableId();
-            const activeDroppableId = this.#dragState.activeDroppableId();
-            if (sourceDroppableId !== null && sourceDroppableId === activeDroppableId) {
-                if (sourceIndex < placeholderIndex) {
-                    destinationIndex = placeholderIndex - 1;
-                }
-            }
-        }
+        const destinationIndex = cancelled
+            ? null
+            : normalizeDropDestinationIndex({
+                sourceIndex,
+                placeholderIndex: this.#dragState.placeholderIndex(),
+                sourceDroppableId: this.#dragState.sourceDroppableId(),
+                activeDroppableId: this.#dragState.activeDroppableId(),
+            });
         // Emit drag end event
         this.dragEnd.emit({
             draggableId: this.vdndDraggable(),