ngx-virtual-dnd 3.1.2 → 3.2.0-alpha.0

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, afterNextRender, ElementRef, Injector, untracked, viewChild, Directive, isDevMode, output, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 
 /**
@@ -452,6 +452,25 @@ const VDND_SCROLL_CONTAINER = new InjectionToken('VDND_SCROLL_CONTAINER');
  */
 const VDND_VIRTUAL_VIEWPORT = new InjectionToken('VDND_VIRTUAL_VIEWPORT');
 
+/** Default shift animation duration (ms) used when the config omits `shiftDuration`. */
+const DEFAULT_SHIFT_DURATION = 200;
+/** Default shift animation easing used when the config omits `shiftEasing`. */
+const DEFAULT_SHIFT_EASING = 'cubic-bezier(0.2, 0, 0, 1)';
+/**
+ * Opt-in animation configuration. When provided, items displaced by the placeholder
+ * slide into their new position instead of jumping. Resolved through the element
+ * injector, so it can be provided app-wide or per component subtree.
+ *
+ * The animation is skipped when the user prefers reduced motion. Values are read each
+ * time an animation starts, so getters can toggle the animation at runtime.
+ *
+ * @example
+ * ```typescript
+ * providers: [{ provide: VDND_ANIMATION_CONFIG, useValue: { shiftDuration: 200 } }]
+ * ```
+ */
+const VDND_ANIMATION_CONFIG = new InjectionToken('VDND_ANIMATION_CONFIG');
+
 const INITIAL_CORE_STATE = {
     isDragging: false,
     draggedItem: null,
@@ -486,10 +505,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 +569,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 +640,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 +649,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 +765,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 +794,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 +823,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 +839,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 +890,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 +904,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 +932,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 +944,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 +1164,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 +1182,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 +1353,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 +1365,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 +1381,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 +1403,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 +1467,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 +1484,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 +1521,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 +1560,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 +1593,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 +1649,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.
@@ -2191,6 +2445,181 @@ function createAutoScrollRegistration(options) {
     destroyRef.onDestroy(unregisterCurrent);
 }
 
+/** Layout changes smaller than this are ignored (sub-pixel rounding noise). */
+const MIN_SHIFT_PX = 0.5;
+/**
+ * FLIP animator for items displaced by the drag placeholder.
+ *
+ * Call `beforeUpdate()` before the DOM reflects a new drag/placeholder state. When the
+ * placeholder moved, it snapshots every rendered element's visual position, then after
+ * the render measures again and plays a compositor-only `transform` animation from the
+ * old position to the new one.
+ *
+ * Positions are measured relative to the scroll content, so scrolling (including
+ * programmatic scroll in the same tick) never animates. Measurements include any
+ * in-flight animation, so a new displacement retargets from where the item currently
+ * is instead of stacking or jumping. Elements whose target did not change keep their
+ * running animation untouched.
+ * @internal
+ */
+class ShiftAnimator {
+    #config;
+    #injector;
+    #getScrollElement;
+    #getEntries;
+    #running = new Map();
+    #snapshot = null;
+    #reducedMotionQuery;
+    #wasDragging = false;
+    #lastPlaceholderIndex = -1;
+    constructor(options) {
+        this.#config = options.config;
+        this.#injector = options.injector;
+        this.#getScrollElement = options.getScrollElement;
+        this.#getEntries = options.getEntries;
+    }
+    /**
+     * Notify the animator of the drag state about to be rendered.
+     * @param placeholderIndex placeholder index in this list, or -1 when not shown here
+     */
+    beforeUpdate(isDragging, placeholderIndex) {
+        const wasDragging = this.#wasDragging;
+        const previousIndex = this.#lastPlaceholderIndex;
+        this.#wasDragging = isDragging;
+        this.#lastPlaceholderIndex = placeholderIndex;
+        if (!isDragging) {
+            // Drop/cancel: the list re-renders with the committed order, so snap everything.
+            this.#snapshot = null;
+            if (wasDragging) {
+                this.cancelAll();
+            }
+            return;
+        }
+        // Drag start renders the placeholder in the hidden item's slot — nothing moves.
+        // A pending snapshot means another update already captured this tick's "before".
+        if (!wasDragging || placeholderIndex === previousIndex || this.#snapshot) {
+            return;
+        }
+        if (!this.#isEnabled()) {
+            return;
+        }
+        this.#snapshot = this.#measure();
+        afterNextRender(() => this.#play(), { injector: this.#injector });
+    }
+    /** Stop the shift animation on an element (e.g. before its view is recycled). */
+    cancel(element) {
+        const running = this.#running.get(element);
+        if (!running)
+            return;
+        this.#running.delete(element);
+        running.animation.cancel();
+    }
+    /** Stop every running shift animation. */
+    cancelAll() {
+        for (const running of this.#running.values()) {
+            running.animation.cancel();
+        }
+        this.#running.clear();
+    }
+    #isEnabled() {
+        if (this.#duration() <= 0)
+            return false;
+        if (typeof Element === 'undefined' || typeof Element.prototype.animate !== 'function') {
+            return false;
+        }
+        return !this.#prefersReducedMotion();
+    }
+    #duration() {
+        return this.#config.shiftDuration ?? DEFAULT_SHIFT_DURATION;
+    }
+    #prefersReducedMotion() {
+        if (this.#reducedMotionQuery === undefined) {
+            this.#reducedMotionQuery =
+                typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion: reduce)') : null;
+        }
+        return this.#reducedMotionQuery?.matches ?? false;
+    }
+    /** Scroll-content origin, so positions are independent of the scroll offset. */
+    #origin() {
+        const scrollElement = this.#getScrollElement();
+        if (!scrollElement)
+            return { x: 0, y: 0 };
+        const rect = scrollElement.getBoundingClientRect();
+        return { x: rect.left - scrollElement.scrollLeft, y: rect.top - scrollElement.scrollTop };
+    }
+    #measure() {
+        const origin = this.#origin();
+        const positions = new Map();
+        for (const [key, element] of this.#getEntries()) {
+            const rect = element.getBoundingClientRect();
+            // Hidden (display: none) elements, such as the dragged item, have no box.
+            if (rect.width === 0 && rect.height === 0)
+                continue;
+            positions.set(element, { key, x: rect.left - origin.x, y: rect.top - origin.y });
+        }
+        return positions;
+    }
+    #play() {
+        const first = this.#snapshot;
+        this.#snapshot = null;
+        if (!first || !this.#wasDragging)
+            return;
+        const last = this.#measure();
+        const stale = [];
+        const shifts = [];
+        // Read phase — no writes until every element is measured.
+        for (const [element, to] of last) {
+            const from = first.get(element);
+            if (!from || !Object.is(from.key, to.key)) {
+                // Newly rendered or recycled for another item: must not animate from a stale offset.
+                stale.push(element);
+                continue;
+            }
+            const dx = from.x - to.x;
+            const dy = from.y - to.y;
+            if (Math.abs(dx) < MIN_SHIFT_PX && Math.abs(dy) < MIN_SHIFT_PX) {
+                continue;
+            }
+            // Both measurements include the in-flight offset, so the new animation must
+            // start from that offset plus the layout delta to continue from the current spot.
+            const current = this.#currentOffset(element);
+            shifts.push({ element, x: dx + current.x, y: dy + current.y });
+        }
+        // Write phase
+        for (const element of stale) {
+            this.cancel(element);
+        }
+        for (const shift of shifts) {
+            this.#start(shift.element, shift.x, shift.y);
+        }
+    }
+    #currentOffset(element) {
+        const running = this.#running.get(element);
+        // Effect-level easing makes `progress` the eased progress, i.e. the fraction travelled.
+        const progress = running?.animation.effect?.getComputedTiming().progress;
+        if (!running || progress === null || progress === undefined) {
+            return { x: 0, y: 0 };
+        }
+        const remaining = 1 - progress;
+        return { x: running.x * remaining, y: running.y * remaining };
+    }
+    #start(element, x, y) {
+        this.#running.get(element)?.animation.cancel();
+        const animation = element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: 'translate(0px, 0px)' }], {
+            duration: this.#duration(),
+            easing: this.#config.shiftEasing ?? DEFAULT_SHIFT_EASING,
+            // Layer on top of any transform the consumer already applies to the item.
+            composite: 'add',
+        });
+        this.#running.set(element, { animation, x, y });
+        animation.onfinish = () => {
+            if (this.#running.get(element)?.animation === animation) {
+                this.#running.delete(element);
+            }
+        };
+    }
+}
+
 /**
  * A virtual scroll container that only renders visible items.
  *
@@ -2246,6 +2675,8 @@ class VirtualScrollContainerComponent {
     #observedElementByKey = new Map();
     /** Measured height from ResizeObserver (used when containerHeight is not provided) */
     #measuredHeight = signal(0, ...(ngDevMode ? [{ debugName: "#measuredHeight" }] : []));
+    /** Slides items displaced by the placeholder (only when VDND_ANIMATION_CONFIG is provided) */
+    #shiftAnimator = this.#createShiftAnimator();
     /** Template for rendering each item - passed as input instead of content child for reliability */
     itemTemplate = input.required(...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
     /** Unique ID for this scroll container (used for auto-scroll registration) */
@@ -2538,6 +2969,16 @@ class VirtualScrollContainerComponent {
             const draggedIndex = this.#draggedItemIndex();
             strategy.setExcludedIndex(draggedIndex >= 0 ? draggedIndex : null);
         });
+        // Snapshot item positions before the template re-renders the placeholder move.
+        // Component effects run before the component's own template is refreshed.
+        if (this.#shiftAnimator) {
+            const animator = this.#shiftAnimator;
+            effect(() => {
+                const isDragging = this.#dragState.isDragging();
+                const placeholderIndex = this.placeholderIndex();
+                untracked(() => animator.beforeUpdate(isDragging, placeholderIndex));
+            });
+        }
         // Keyboard drag autoscroll: scroll to keep target index visible
         effect(() => {
             // Only apply when this droppable is active during keyboard drag
@@ -2663,6 +3104,32 @@ class VirtualScrollContainerComponent {
         }
         this.#observedElementByKey.clear();
         this.#itemResizeObserver?.disconnect();
+        this.#shiftAnimator?.cancelAll();
+    }
+    #createShiftAnimator() {
+        const config = inject(VDND_ANIMATION_CONFIG, { optional: true });
+        if (!config)
+            return null;
+        return new ShiftAnimator({
+            config,
+            injector: this.#injector,
+            getScrollElement: () => this.#elementRef.nativeElement,
+            getEntries: () => this.#shiftAnimationEntries(),
+        });
+    }
+    /**
+     * Rendered item roots and the placeholder. `@for` never reuses a view for a different
+     * track key, so each element is its own stable identity.
+     */
+    *#shiftAnimationEntries() {
+        const wrapper = this.#elementRef.nativeElement.querySelector('.vdnd-virtual-scroll-content-wrapper');
+        if (!wrapper)
+            return;
+        for (const child of Array.from(wrapper.children)) {
+            if (child instanceof HTMLElement) {
+                yield [child, child];
+            }
+        }
     }
     /**
      * Set up ResizeObserver for measuring individual item heights.
@@ -3157,6 +3624,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 +3661,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" }] : []));
@@ -3213,6 +3693,11 @@ class DroppableDirective {
     /** Emits when an item is dropped on this droppable */
     // eslint-disable-next-line @angular-eslint/no-output-native
     drop = output();
+    /**
+     * Emits each time the placeholder moves within this droppable during a drag
+     * (every item displacement) — e.g. to trigger haptic feedback.
+     */
+    placeholderMove = output();
     /** Whether this droppable is currently being targeted */
     isActive = computed(() => {
         const activeId = this.#dragState.activeDroppableId();
@@ -3225,29 +3710,35 @@ class DroppableDirective {
         }
         return this.#dragState.placeholderId();
     }, ...(ngDevMode ? [{ debugName: "placeholderId" }] : []));
-    /** Track previous active state for cache clearing on leave */
-    #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;
+    /**
+     * The placeholder's insertion index in this droppable (DropEvent convention),
+     * or null when the placeholder is not here.
+     */
+    #placeholderInsertionIndex = computed(() => {
+        if (!this.isActive() || !this.#dragState.isDragging()) {
+            return null;
         }
-        // Check if content is larger than container
-        return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-    }
+        const sourceIndex = this.#dragState.sourceIndex();
+        return normalizeDropDestinationIndex({
+            sourceIndex: sourceIndex ?? -1,
+            placeholderIndex: this.#dragState.placeholderIndex(),
+            // Without a known source index there is no hidden-source adjustment to undo
+            sourceDroppableId: sourceIndex === null ? null : this.#dragState.sourceDroppableId(),
+            activeDroppableId: this.vdndDroppable(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "#placeholderInsertionIndex" }] : []));
+    /** Last insertion index reported via placeholderMove (null when not here) */
+    #lastPlaceholderIndex = null;
+    /** Drag whose initial placeholder position has already been seen by this droppable */
+    #placeholderTrackedDrag = null;
+    /** Track previous active state to detect the drag-end transition */
+    #wasActive = false;
+    /**
+     * 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 +3746,55 @@ 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()),
+        });
+        // 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);
+            }
+        });
+        effect(() => {
+            const currentIndex = this.#placeholderInsertionIndex();
+            untracked(() => this.#handlePlaceholderMove(currentIndex));
         });
-        // React to state changes and handle drop events
+        // 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 +3806,51 @@ 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);
+        }
+    }
+    /**
+     * Emit placeholderMove when the placeholder moved within (or entered) this droppable.
+     */
+    #handlePlaceholderMove(currentIndex) {
+        let previousIndex = this.#lastPlaceholderIndex;
+        this.#lastPlaceholderIndex = currentIndex;
+        const draggedItem = this.#dragState.draggedItem();
+        if (currentIndex === null || currentIndex === previousIndex || !draggedItem) {
+            return;
+        }
+        // The drag's first placement in the source list starts from the item's own slot:
+        // nothing is displaced when the placeholder simply takes the hidden item's place.
+        const isFirstPlacement = this.#placeholderTrackedDrag !== draggedItem;
+        this.#placeholderTrackedDrag = draggedItem;
+        const sourceDroppableId = this.#dragState.sourceDroppableId();
+        const sourceIndex = this.#dragState.sourceIndex();
+        if (isFirstPlacement && sourceDroppableId === this.vdndDroppable() && sourceIndex !== null) {
+            if (currentIndex === sourceIndex) {
+                return;
+            }
+            previousIndex = sourceIndex;
+        }
+        this.placeholderMove.emit({
+            draggableId: draggedItem.draggableId,
+            sourceDroppableId: sourceDroppableId ?? '',
+            droppableId: this.vdndDroppable(),
+            previousIndex,
+            currentIndex,
+            data: draggedItem.data,
+        });
     }
     /**
      * 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 +3861,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 +3947,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", placeholderMove: "placeholderMove" }, 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 +3956,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',
@@ -3407,7 +3964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.vdnd-droppable-disabled]': 'disabled()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { vdndDroppable: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppable", required: true }] }], vdndDroppableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableGroup", required: false }] }], vdndDroppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }] } });
+        }], ctorParameters: () => [], propDecorators: { vdndDroppable: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppable", required: true }] }], vdndDroppableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableGroup", required: false }] }], vdndDroppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }], placeholderMove: [{ type: i0.Output, args: ["placeholderMove"] }] } });
 
 /**
  * A high-level component that combines droppable, virtual scroll, and placeholder
@@ -3496,8 +4053,10 @@ class VirtualSortableListComponent {
     /** Emits when an item is dropped on this list */
     // eslint-disable-next-line @angular-eslint/no-output-native
     drop = output();
+    /** Emits each time the placeholder moves within this list (every item displacement) */
+    placeholderMove = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualSortableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: VirtualSortableListComponent, isStandalone: true, selector: "vdnd-sortable-list", inputs: { droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableData: { classPropertyName: "droppableData", publicName: "droppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", 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: { classAttribute: "vdnd-sortable-list" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: VirtualSortableListComponent, isStandalone: true, selector: "vdnd-sortable-list", inputs: { droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableData: { classPropertyName: "droppableData", publicName: "droppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", 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", placeholderMove: "placeholderMove" }, host: { classAttribute: "vdnd-sortable-list" }, ngImport: i0, template: `
     <div
       class="vdnd-sortable-list-droppable"
       [vdndDroppable]="droppableId()"
@@ -3506,6 +4065,7 @@ class VirtualSortableListComponent {
       [disabled]="disabled()"
       [constrainToContainer]="constrainToContainer()"
       (drop)="drop.emit($event)"
+      (placeholderMove)="placeholderMove.emit($event)"
     >
       <vdnd-virtual-scroll
         [items]="items()"
@@ -3523,7 +4083,7 @@ class VirtualSortableListComponent {
       >
       </vdnd-virtual-scroll>
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: VirtualScrollContainerComponent, selector: "vdnd-virtual-scroll", inputs: ["itemTemplate", "scrollContainerId", "autoScrollEnabled", "autoScrollConfig", "items", "itemHeight", "dynamicItemHeight", "containerHeight", "overscan", "stickyItemIds", "itemIdFn", "trackByFn", "droppableId", "autoStickyDraggedItem"] }, { kind: "directive", type: DroppableDirective, selector: "[vdndDroppable]", inputs: ["vdndDroppable", "vdndDroppableGroup", "vdndDroppableData", "disabled", "autoScrollEnabled", "autoScrollConfig", "constrainToContainer"], outputs: ["drop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: VirtualScrollContainerComponent, selector: "vdnd-virtual-scroll", inputs: ["itemTemplate", "scrollContainerId", "autoScrollEnabled", "autoScrollConfig", "items", "itemHeight", "dynamicItemHeight", "containerHeight", "overscan", "stickyItemIds", "itemIdFn", "trackByFn", "droppableId", "autoStickyDraggedItem"] }, { kind: "directive", type: DroppableDirective, selector: "[vdndDroppable]", inputs: ["vdndDroppable", "vdndDroppableGroup", "vdndDroppableData", "disabled", "autoScrollEnabled", "autoScrollConfig", "constrainToContainer"], outputs: ["drop", "placeholderMove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualSortableListComponent, decorators: [{
             type: Component,
@@ -3538,6 +4098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       [disabled]="disabled()"
       [constrainToContainer]="constrainToContainer()"
       (drop)="drop.emit($event)"
+      (placeholderMove)="placeholderMove.emit($event)"
     >
       <vdnd-virtual-scroll
         [items]="items()"
@@ -3556,7 +4117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       </vdnd-virtual-scroll>
     </div>
   `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { droppableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableId", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], itemIdFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIdFn", required: true }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: true }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], droppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], containerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }] } });
+        }], propDecorators: { droppableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableId", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], itemIdFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIdFn", required: true }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: true }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], droppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], containerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }], placeholderMove: [{ type: i0.Output, args: ["placeholderMove"] }] } });
 
 /**
  * A virtual viewport component that provides efficient wrapper-based positioning
@@ -4113,36 +4674,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 +4726,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 +4828,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 +5147,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 +5331,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 +5339,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 +5358,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 +5454,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 +5617,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 +5639,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(),
@@ -5214,6 +5834,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }] } });
 
+/** Render-queue key of the placeholder entry */
+const PLACEHOLDER_KEY = '__placeholder__';
 /**
  * A structural directive for virtual scrolling within custom scroll containers.
  * Provides maximum flexibility for advanced use cases where the component wrapper
@@ -5265,6 +5887,8 @@ class VirtualForDirective {
      * When present, droppableId is inherited automatically.
      */
     #droppable = inject(DroppableDirective, { optional: true });
+    /** Slides items displaced by the placeholder (only when VDND_ANIMATION_CONFIG is provided) */
+    #shiftAnimator = this.#createShiftAnimator();
     /** Whether we're inside a viewport component (use wrapper positioning) */
     #useViewportPositioning = this.#viewport !== null;
     /** Pool of views for reuse */
@@ -5464,6 +6088,31 @@ class VirtualForDirective {
         this.#placeholder?.remove();
         // Clean up ResizeObserver
         this.#resizeObserver?.disconnect();
+        this.#shiftAnimator?.cancelAll();
+    }
+    #createShiftAnimator() {
+        const config = inject(VDND_ANIMATION_CONFIG, { optional: true });
+        if (!config)
+            return null;
+        return new ShiftAnimator({
+            config,
+            injector: this.#injector,
+            getScrollElement: () => this.#scrollContainer.nativeElement,
+            getEntries: () => this.#shiftAnimationEntries(),
+        });
+    }
+    /** Rendered item root elements (keyed by trackBy key) plus the placeholder. */
+    *#shiftAnimationEntries() {
+        for (const [key, view] of this.#activeViews) {
+            for (const node of view.rootNodes) {
+                if (node instanceof HTMLElement) {
+                    yield [key, node];
+                }
+            }
+        }
+        if (this.#placeholder && this.#placeholderInDom) {
+            yield [PLACEHOLDER_KEY, this.#placeholder];
+        }
     }
     /**
      * Create the placeholder element for drag operations.
@@ -5537,6 +6186,19 @@ class VirtualForDirective {
             }
         }
     }
+    /**
+     * Stop any shift animation on a view about to be pooled — a recycled view must not
+     * carry an in-flight offset over to the item it renders next.
+     */
+    #cancelShiftAnimation(view) {
+        if (!this.#shiftAnimator)
+            return;
+        for (const node of view.rootNodes) {
+            if (node instanceof HTMLElement) {
+                this.#shiftAnimator.cancel(node);
+            }
+        }
+    }
     /**
      * Stop observing an element's root nodes.
      */
@@ -5569,6 +6231,8 @@ class VirtualForDirective {
             draggedIndex >= 0 &&
             isSourceList &&
             draggedIndex < items.length;
+        // Snapshot positions before the DOM changes so displaced items can slide
+        this.#shiftAnimator?.beforeUpdate(this.#dragState.isDragging(), placeholderIndex);
         // Notify viewport of render start index for wrapper positioning
         this.#notifyViewportRenderStart(start);
         // 1. Build the list of items to render
@@ -5614,7 +6278,7 @@ class VirtualForDirective {
             if (showPlaceholder && placeholderIndex === i && !placeholderInserted) {
                 itemsToRender.push({
                     type: 'placeholder',
-                    key: '__placeholder__',
+                    key: PLACEHOLDER_KEY,
                     context: null,
                     visualIndex: placeholderIndex,
                 });
@@ -5638,7 +6302,7 @@ class VirtualForDirective {
         if (showPlaceholder && placeholderIndex >= items.length && !placeholderInserted) {
             itemsToRender.push({
                 type: 'placeholder',
-                key: '__placeholder__',
+                key: PLACEHOLDER_KEY,
                 context: null,
                 visualIndex: placeholderIndex,
             });
@@ -5681,6 +6345,7 @@ class VirtualForDirective {
                     this.#viewContainer.detach(index);
                 }
                 this.#unobserveViewElements(view);
+                this.#cancelShiftAnimation(view);
                 this.#viewPool.push(view);
                 this.#activeViews.delete(key);
             }
@@ -6075,5 +6740,5 @@ function removeAt(list, index) {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoScrollService, ContentHeaderDirective, DragPlaceholderComponent, DragPreviewComponent, DragStateService, DraggableDirective, DroppableDirective, DroppableGroupDirective, DynamicHeightStrategy, END_OF_LIST, ElementCloneService, FixedHeightStrategy, INITIAL_DRAG_STATE, KeyboardDragService, OverlayContainerService, PlaceholderComponent, PositionCalculatorService, ScrollableDirective, VDND_GROUP_TOKEN, VDND_SCROLL_CONTAINER, VDND_VIRTUAL_VIEWPORT, VirtualContentComponent, VirtualForDirective, VirtualScrollContainerComponent, VirtualSortableListComponent, VirtualViewportComponent, applyMove, insertAt, isNoOpDrop, moveItem, removeAt, reorderItems };
+export { AutoScrollService, ContentHeaderDirective, DragPlaceholderComponent, DragPreviewComponent, DragStateService, DraggableDirective, DroppableDirective, DroppableGroupDirective, DynamicHeightStrategy, END_OF_LIST, ElementCloneService, FixedHeightStrategy, INITIAL_DRAG_STATE, KeyboardDragService, OverlayContainerService, PlaceholderComponent, PositionCalculatorService, ScrollableDirective, VDND_ANIMATION_CONFIG, VDND_GROUP_TOKEN, VDND_SCROLL_CONTAINER, VDND_VIRTUAL_VIEWPORT, VirtualContentComponent, VirtualForDirective, VirtualScrollContainerComponent, VirtualSortableListComponent, VirtualViewportComponent, applyMove, insertAt, isNoOpDrop, moveItem, removeAt, reorderItems };
 //# sourceMappingURL=ngx-virtual-dnd.mjs.map