@acorex/cdk 22.0.0 → 22.0.1-next.0

package/fesm2022/acorex-cdk-drag-drop.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, signal, Directive, NgZone, Renderer2, ChangeDetectorRef, PLATFORM_ID, input, output, contentChildren, DOCUMENT, ViewContainerRef, contentChild, linkedSignal, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
+import { inject, ElementRef, signal, Directive, NgZone, Renderer2, ChangeDetectorRef, PLATFORM_ID, input, output, contentChildren, linkedSignal, DOCUMENT, ViewContainerRef, contentChild, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { clamp } from 'lodash-es';
 import { NXComponent } from '@acorex/cdk/common';
+import { AXHtmlUtil } from '@acorex/core/utils';
 
 class AXDragHandleDirective {
     constructor() {
@@ -52,6 +53,8 @@ class AXDropListDirective extends NXComponent {
         ...(ngDevMode ? [{ debugName: "dropListOrientation" }] : /* istanbul ignore next */ []));
         /** Emits when an item is dropped into the list. */
         this.dropListDropped = output();
+        /** Emits when the sort preview transforms change during an active drag. */
+        this.sortPreviewChanged = output();
         /** The `axDrag` directives that are direct children of this list. */
         this._draggableItems = contentChildren(AXDragDirective, { ...(ngDevMode ? { debugName: "_draggableItems" } : /* istanbul ignore next */ {}), descendants: false });
         // --- Internal State Management ---
@@ -72,8 +75,15 @@ class AXDropListDirective extends NXComponent {
         /** The detected `gap` of the list for the current orientation. */
         this._listGap = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_listGap" }] : /* istanbul ignore next */ []));
-        /** A signal-based alias for the orientation input for internal use. */
-        this._orientation = this.dropListOrientation;
+        /** Whether the list is in RTL direction (cached at drag start). */
+        this._isRtl = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isRtl" }] : /* istanbul ignore next */ []));
+        /** Internal orientation state; can be overridden programmatically by host components. */
+        this.orientation = linkedSignal(() => this.dropListOrientation(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /** Internal sorting-disabled state; can be overridden programmatically by host components. */
+        this.isSortingDisabled = linkedSignal(() => this.sortingDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSortingDisabled" }] : /* istanbul ignore next */ []));
         /** DOM placeholder element for inter-list drags */
         this._placeholderElement = null;
     }
@@ -97,12 +107,16 @@ class AXDropListDirective extends NXComponent {
     isDragActiveForThisList(dragItem) {
         return this._activeDragItem() === dragItem;
     }
+    /** Whether the list is horizontal and in RTL direction. */
+    isHorizontalRtl() {
+        return this.orientation() === 'horizontal' && this._isRtl();
+    }
     /**
      * Prepares the list for sorting when a drag operation starts from within this list.
      * @param dragItem The item that is being dragged.
      */
     prepareSort(dragItem) {
-        if (!this.axDropList() || this.sortingDisabled() || this._activeDragItem() || dragItem.dragDisabled())
+        if (!this.axDropList() || this.isSortingDisabled() || this._activeDragItem() || dragItem.isDragDisabled())
             return;
         this._activeDragItem.set(dragItem);
         this.element.classList.add('ax-drop-list-sorting-active');
@@ -119,7 +133,7 @@ class AXDropListDirective extends NXComponent {
      * @param dragItem The item entering this list.
      */
     enter(dragItem) {
-        if (!this.axDropList() || this.sortingDisabled() || this.isDragActiveForThisList(dragItem))
+        if (!this.axDropList() || this.isSortingDisabled() || this.isDragActiveForThisList(dragItem))
             return;
         // Clean up any existing placeholder from previous list
         this._removePlaceholderElement();
@@ -135,10 +149,10 @@ class AXDropListDirective extends NXComponent {
     sort(event, dragItem) {
         if (!this.axDropList() ||
             !this.isDragActiveForThisList(dragItem) ||
-            this.sortingDisabled() ||
+            this.isSortingDisabled() ||
             !this._listInitialRect())
             return;
-        const pointerPosition = this._orientation() === 'vertical' ? event.clientY : event.clientX;
+        const pointerPosition = this.orientation() === 'vertical' ? event.clientY : event.clientX;
         const newPlaceholderIndex = this._calculatePlaceholderIndex(pointerPosition);
         if (this._placeholderIndex() !== newPlaceholderIndex) {
             this._placeholderIndex.set(newPlaceholderIndex);
@@ -152,7 +166,7 @@ class AXDropListDirective extends NXComponent {
      * @param sourceList The list where the drag originated.
      */
     finalizeSort(event, droppedItem, sourceList) {
-        if (!this.axDropList() || !this.isDragActiveForThisList(droppedItem) || this.sortingDisabled()) {
+        if (!this.axDropList() || !this.isDragActiveForThisList(droppedItem) || this.isSortingDisabled()) {
             this.resetSortStateAndStyles(sourceList);
             return;
         }
@@ -197,8 +211,11 @@ class AXDropListDirective extends NXComponent {
     /** Caches the geometry of the list and its items at the start of a drag. */
     _cacheGeometry() {
         this._listInitialRect.set(this.element.getBoundingClientRect());
+        this._isRtl.set(AXHtmlUtil.isRtl(this.element));
         this._detectAndCacheListGap();
-        const items = this._draggableItems().map((itemDraggable) => {
+        const items = [...this._draggableItems()]
+            .sort((a, b) => a.element().compareDocumentPosition(b.element()) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1)
+            .map((itemDraggable) => {
             const el = itemDraggable.element();
             const style = window.getComputedStyle(el);
             const rect = el.getBoundingClientRect();
@@ -226,7 +243,7 @@ class AXDropListDirective extends NXComponent {
             const gapParts = gapValue.split(' ');
             const rowGap = parseFloat(gapParts[0]);
             const columnGap = parseFloat(gapParts[1] || gapParts[0]);
-            this._listGap.set(this._orientation() === 'vertical' ? rowGap : columnGap);
+            this._listGap.set(this.orientation() === 'vertical' ? rowGap : columnGap);
         }
         else {
             this._listGap.set(0);
@@ -246,16 +263,19 @@ class AXDropListDirective extends NXComponent {
         const cachedItems = this._cachedItems();
         const originalIndex = cachedItems.findIndex((d) => d.item === activeItem);
         const siblings = cachedItems.filter((d) => d.item !== activeItem);
-        const scrollDelta = this._orientation() === 'vertical'
+        const scrollDelta = this.orientation() === 'vertical'
             ? this.element.getBoundingClientRect().top - listRect.top
             : this.element.getBoundingClientRect().left - listRect.left;
         let newIndexInSiblings = -1;
         for (let i = 0; i < siblings.length; i++) {
             const sibling = siblings[i];
-            const itemMidPoint = (this._orientation() === 'vertical' ? sibling.initialRect.top : sibling.initialRect.left) +
+            const itemMidPoint = (this.orientation() === 'vertical' ? sibling.initialRect.top : sibling.initialRect.left) +
                 scrollDelta +
-                (this._orientation() === 'vertical' ? sibling.height : sibling.width) / 2;
-            if (pointerPosition < itemMidPoint) {
+                (this.orientation() === 'vertical' ? sibling.height : sibling.width) / 2;
+            const isBeforeSibling = this.isHorizontalRtl()
+                ? pointerPosition > itemMidPoint
+                : pointerPosition < itemMidPoint;
+            if (isBeforeSibling) {
                 newIndexInSiblings = i;
                 break;
             }
@@ -274,7 +294,7 @@ class AXDropListDirective extends NXComponent {
         const end = Math.max(originalIndex, potentialPlaceholderIndex);
         for (let i = start; i < end; i++) {
             const itemData = cachedItems[i];
-            if (itemData.item !== activeItem && itemData.item.dragDisabled()) {
+            if (itemData.item !== activeItem && itemData.item.isDragDisabled()) {
                 // We've hit a disabled "wall". Stop the placeholder at the boundary.
                 if (potentialPlaceholderIndex > originalIndex) {
                     return i; // Dragging down/right: stop *before* the wall.
@@ -301,19 +321,24 @@ class AXDropListDirective extends NXComponent {
         else {
             // --- INTRA-LIST DRAG: Use transforms (works well for same-list reordering) ---
             this._removePlaceholderElement();
-            const getItemSpace = (itemData) => this._orientation() === 'vertical'
+            const getItemSpace = (itemData) => this.orientation() === 'vertical'
                 ? itemData.height + itemData.margins.top + itemData.margins.bottom
                 : itemData.width + itemData.margins.left + itemData.margins.right;
             const draggedItemSize = isIntraListDrag ? getItemSpace(this._cachedItems()[originalIndex]) : 0;
+            const axisSign = this.isHorizontalRtl() ? -1 : 1;
             this._cachedItems().forEach((data, index) => {
-                if (data.item.dragDisabled()) {
+                if (data.item.isDragDisabled()) {
                     this._renderer.removeStyle(data.element, 'transform');
                     return;
                 }
                 const transform = this._calculateTransform(index, originalIndex, draggedItemSize, getItemSpace);
-                this._renderer.setStyle(data.element, 'transform', transform ? `${this._orientation() === 'vertical' ? 'translateY' : 'translateX'}(${transform}px)` : '');
+                const signedTransform = transform * axisSign;
+                this._renderer.setStyle(data.element, 'transform', transform
+                    ? `${this.orientation() === 'vertical' ? 'translateY' : 'translateX'}(${signedTransform}px)`
+                    : '');
             });
         }
+        this.sortPreviewChanged.emit();
     }
     /** Creates or moves the placeholder element for inter-list drags */
     _updatePlaceholderElement(activeItem, targetIndex) {
@@ -423,6 +448,7 @@ class AXDropListDirective extends NXComponent {
     _resetAllTransforms() {
         this._cachedItems().forEach((data) => this._renderer.setStyle(data.element, 'transform', ''));
         this._removePlaceholderElement(); // Clean up inter-list placeholder
+        this.sortPreviewChanged.emit();
     }
     /** Resets the internal state of the directive to its initial values. */
     resetSortState() {
@@ -434,7 +460,7 @@ class AXDropListDirective extends NXComponent {
         this._listGap.set(0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDropListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.8", type: AXDropListDirective, isStandalone: true, selector: "[axDropList]", inputs: { axDropList: { classPropertyName: "axDropList", publicName: "axDropList", isSignal: true, isRequired: false, transformFunction: null }, sortingDisabled: { classPropertyName: "sortingDisabled", publicName: "sortingDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, dropListOrientation: { classPropertyName: "dropListOrientation", publicName: "dropListOrientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropListDropped: "dropListDropped" }, queries: [{ propertyName: "_draggableItems", predicate: AXDragDirective, isSignal: true }], exportAs: ["axDropList"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.8", type: AXDropListDirective, isStandalone: true, selector: "[axDropList]", inputs: { axDropList: { classPropertyName: "axDropList", publicName: "axDropList", isSignal: true, isRequired: false, transformFunction: null }, sortingDisabled: { classPropertyName: "sortingDisabled", publicName: "sortingDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, dropListOrientation: { classPropertyName: "dropListOrientation", publicName: "dropListOrientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropListDropped: "dropListDropped", sortPreviewChanged: "sortPreviewChanged" }, queries: [{ propertyName: "_draggableItems", predicate: AXDragDirective, isSignal: true }], exportAs: ["axDropList"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDropListDirective, decorators: [{
             type: Directive,
@@ -442,7 +468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: '[axDropList]',
                     exportAs: 'axDropList',
                 }]
-        }], propDecorators: { axDropList: [{ type: i0.Input, args: [{ isSignal: true, alias: "axDropList", required: false }] }], sortingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingDisabled", required: false }] }], dropListGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListGroup", required: false }] }], dropListOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListOrientation", required: false }] }], dropListDropped: [{ type: i0.Output, args: ["dropListDropped"] }], _draggableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXDragDirective), { ...{ descendants: false }, isSignal: true }] }] } });
+        }], propDecorators: { axDropList: [{ type: i0.Input, args: [{ isSignal: true, alias: "axDropList", required: false }] }], sortingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingDisabled", required: false }] }], dropListGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListGroup", required: false }] }], dropListOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListOrientation", required: false }] }], dropListDropped: [{ type: i0.Output, args: ["dropListDropped"] }], sortPreviewChanged: [{ type: i0.Output, args: ["sortPreviewChanged"] }], _draggableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXDragDirective), { ...{ descendants: false }, isSignal: true }] }] } });
 
 // Zone detection constants for nested drop lists (tree nodes)
 const ZONE_TOP_THRESHOLD = 0.3; // Top 30% triggers reorder BEFORE
@@ -484,6 +510,18 @@ class AXDragDirective {
         ...(ngDevMode ? [undefined, { debugName: "dragBoundary" }] : /* istanbul ignore next */ []));
         this.dragTransitionDuration = input(150, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragTransitionDuration" }] : /* istanbul ignore next */ []));
+        this.isDragDisabled = linkedSignal(() => this.dragDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDragDisabled" }] : /* istanbul ignore next */ []));
+        this.lockAxis = linkedSignal(() => this.dragLockAxis(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lockAxis" }] : /* istanbul ignore next */ []));
+        this.dragBoundaryOverride = linkedSignal(() => this.dragBoundary(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragBoundaryOverride" }] : /* istanbul ignore next */ []));
+        this.startDelay = linkedSignal(() => this.dragStartDelay() ?? 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startDelay" }] : /* istanbul ignore next */ []));
+        this.dragTouchAction = linkedSignal(() => 'none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragTouchAction" }] : /* istanbul ignore next */ []));
+        this.dragCursorOverride = linkedSignal(() => this.dragCursor(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragCursorOverride" }] : /* istanbul ignore next */ []));
         this.dragPositionChanged = output();
         this.isMoving = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isMoving" }] : /* istanbul ignore next */ []));
@@ -511,19 +549,25 @@ class AXDragDirective {
         ...(ngDevMode ? [{ debugName: "prevDropZone" }] : /* istanbul ignore next */ []));
         this.dragStartOffset = signal({ x: 0, y: 0 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragStartOffset" }] : /* istanbul ignore next */ []));
+        this.pointerDownPosition = signal({ x: 0, y: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pointerDownPosition" }] : /* istanbul ignore next */ []));
         this.clonePointerOffset = signal({ x: 0, y: 0 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "clonePointerOffset" }] : /* istanbul ignore next */ []));
         this.clonedElementViewRef = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "clonedElementViewRef" }] : /* istanbul ignore next */ []));
         this.rafId = null;
         this.pendingPointerEvent = null;
+        this.savedBodyCursor = null;
+        this.holdDelayTimer = null;
+        this.holdDelayReady = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "holdDelayReady" }] : /* istanbul ignore next */ []));
         this._parentDropList = inject(AXDropListDirective, { optional: true, skipSelf: true, host: false });
         this._currentDropList = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_currentDropList" }] : /* istanbul ignore next */ []));
         this.createCloneElement = computed(() => this.dragElementClone() || !!this._parentDropList, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "createCloneElement" }] : /* istanbul ignore next */ []));
         this.boundaryElement = computed(() => {
-            const boundary = this.dragBoundary();
+            const boundary = this.dragBoundaryOverride();
             if (!boundary) {
                 return null;
             }
@@ -556,17 +600,25 @@ class AXDragDirective {
         this.listenersAttached = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listenersAttached" }] : /* istanbul ignore next */ []));
         this.#dragDisabledEffect = effect(() => {
-            if (this.dragCursor() === 'none') {
+            const cursor = this.dragCursorOverride();
+            const disabled = this.isDragDisabled();
+            const handle = this.handle();
+            if (disabled || cursor === 'none') {
+                if (!this.isMoving() && !this.holdDelayReady()) {
+                    this.renderer.removeStyle(handle, 'cursor');
+                }
+                if (disabled) {
+                    this.renderer.removeStyle(handle, 'touch-action');
+                }
+                else {
+                    this.renderer.setStyle(handle, 'touch-action', this.dragTouchAction());
+                }
                 return;
             }
-            if (!this.dragDisabled()) {
-                this.renderer.setStyle(this.handle(), 'cursor', this.dragCursor());
-                this.renderer.setStyle(this.handle(), 'touch-action', 'none');
-            }
-            else {
-                this.renderer.removeStyle(this.handle(), 'cursor');
-                this.renderer.removeStyle(this.handle(), 'touch-action');
+            if (!this.isMoving() && !this.holdDelayReady()) {
+                this.renderer.setStyle(handle, 'cursor', cursor);
             }
+            this.renderer.setStyle(handle, 'touch-action', this.dragTouchAction());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#dragDisabledEffect" }] : /* istanbul ignore next */ []));
         this.#handleChangeEffect = effect(() => {
@@ -597,7 +649,6 @@ class AXDragDirective {
             if (this._parentDropList) {
                 this.setElementTransition(this.element());
             }
-            this.renderer.setStyle(this.element(), 'z-index', '1');
             this.elementOpacity.set(getComputedStyle(this.element()).opacity);
         }
     }
@@ -615,7 +666,56 @@ class AXDragDirective {
             if (this._parentDropList && this.isDragging()) {
                 this._parentDropList.cancelSort();
             }
+            this.clearActiveDragCursor();
+            this.clearHoldDelayTimer();
+            this.renderer.removeStyle(this.element(), 'z-index');
+        }
+    }
+    resolveDropCursor(canDrop) {
+        if (this.dragCursorOverride() === 'grab') {
+            return canDrop ? 'grabbing' : 'not-allowed';
         }
+        return canDrop ? 'move' : 'not-allowed';
+    }
+    setActiveDragCursor(cursor) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (this.savedBodyCursor === null) {
+            this.savedBodyCursor = this.document.body.style.cursor;
+        }
+        this.document.body.style.cursor = cursor;
+    }
+    clearActiveDragCursor() {
+        if (!isPlatformBrowser(this.platformId) || this.savedBodyCursor === null)
+            return;
+        this.document.body.style.cursor = this.savedBodyCursor;
+        this.savedBodyCursor = null;
+    }
+    clearHoldDelayTimer() {
+        if (this.holdDelayTimer !== null) {
+            clearTimeout(this.holdDelayTimer);
+            this.holdDelayTimer = null;
+        }
+        this.holdDelayReady.set(false);
+    }
+    scheduleHoldDelayFeedback() {
+        this.clearHoldDelayTimer();
+        const delay = this.startDelay();
+        if (delay <= 0 || this.dragCursorOverride() !== 'grab') {
+            return;
+        }
+        this.holdDelayTimer = setTimeout(() => {
+            this.holdDelayTimer = null;
+            if (!this.isDragging() || this.isMoving() || this.isDragDisabled()) {
+                return;
+            }
+            this.holdDelayReady.set(true);
+            this.renderer.setStyle(this.handle(), 'cursor', 'grabbing');
+            this.setActiveDragCursor('grabbing');
+        }, delay);
+    }
+    setElementDropCursor(element, cursor) {
+        this.renderer.setStyle(element, 'cursor', cursor);
     }
     setElementTransition(element) {
         this.renderer.setStyle(element, 'transition-property', 'transform, opacity, translate');
@@ -628,24 +728,23 @@ class AXDragDirective {
     handlePointerDown(e) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        if (!this.axDrag() || this.dragDisabled() || e.button !== 0 || this._parentDropList?.sortingDisabled())
+        if (!this.axDrag() || this.isDragDisabled() || e.button !== 0 || this._parentDropList?.isSortingDisabled())
             return;
         this.isDragging.set(true);
         this.movedAfterDelay.set(false);
-        if (this.dragCursor() === 'move') {
+        if (this.dragCursorOverride() === 'move') {
             this.renderer.setStyle(this.handle(), 'cursor', 'move');
         }
-        else if (this.dragCursor() === 'grab') {
-            this.renderer.setStyle(this.handle(), 'cursor', 'grabbing');
-        }
         this.dragStartOffset.set({ x: e.clientX - this.currentAxis().x, y: e.clientY - this.currentAxis().y });
+        this.pointerDownPosition.set({ x: e.clientX, y: e.clientY });
         this.renderer.setStyle(this.handle(), 'userSelect', 'none');
         this.activePointerId.set(e.pointerId);
         this.addDocumentListeners();
         this.dragStartTime.set(Date.now());
+        this.scheduleHoldDelayFeedback();
     }
     handleDblClick() {
-        if (!this.dragResetOnDblClick() || this.dragDisabled())
+        if (!this.dragResetOnDblClick() || this.isDragDisabled())
             return;
         this.setPosition(0, 0);
     }
@@ -653,17 +752,26 @@ class AXDragDirective {
         if (!this.isDragging() || !isPlatformBrowser(this.platformId) || e.pointerId !== this.activePointerId()) {
             return;
         }
-        e.preventDefault();
         if (!this.isMoving()) {
-            const delay = this.dragStartDelay() ?? 0;
-            // FIX: Delay logic was inverted
-            if (Date.now() - this.dragStartTime() < delay) {
-                return; // Still waiting for delay
+            const delay = this.startDelay();
+            const down = this.pointerDownPosition();
+            const movedX = e.clientX - down.x;
+            const movedY = e.clientY - down.y;
+            const movedDistance = Math.sqrt(movedX * movedX + movedY * movedY);
+            if (delay > 0 && !this.holdDelayReady() && Date.now() - this.dragStartTime() < delay) {
+                if (movedDistance > 8) {
+                    this.abortDragSequence();
+                }
+                return;
             }
+            e.preventDefault();
             this.isMoving.set(true);
             this.handle().setPointerCapture(e.pointerId);
             this.startDrag(e);
         }
+        else {
+            e.preventDefault();
+        }
         // Run position updates outside Angular zone for better performance
         this.zone.runOutsideAngular(() => {
             if (this.createCloneElement()) {
@@ -694,7 +802,24 @@ class AXDragDirective {
             this.dropZoneHoverHandler(e);
         }
     }
+    abortDragSequence() {
+        this.clearHoldDelayTimer();
+        this.isDragging.set(false);
+        this.isMoving.set(false);
+        this.activePointerId.set(null);
+        this.removeDocumentListeners();
+        this.renderer.removeStyle(this.handle(), 'userSelect');
+        if (this.dragCursorOverride() === 'grab') {
+            this.renderer.setStyle(this.handle(), 'cursor', 'grab');
+        }
+        this.clearActiveDragCursor();
+    }
     startDrag(e) {
+        if (this.dragCursorOverride() === 'grab') {
+            this.renderer.setStyle(this.handle(), 'cursor', 'grabbing');
+            this.setActiveDragCursor('grabbing');
+        }
+        this.renderer.setStyle(this.element(), 'z-index', '1');
         // Add CDK-style classes
         this.renderer.addClass(this.element(), 'ax-dragging');
         this.renderer.addClass(this.element(), 'ax-drag-placeholder');
@@ -722,9 +847,11 @@ class AXDragDirective {
         if (e.pointerId !== this.activePointerId() || !isPlatformBrowser(this.platformId) || !this.isDragging()) {
             return;
         }
-        if (this.dragCursor() === 'grab') {
+        this.clearHoldDelayTimer();
+        if (this.dragCursorOverride() === 'grab') {
             this.renderer.setStyle(this.handle(), 'cursor', 'grab');
         }
+        this.clearActiveDragCursor();
         const wasMoving = this.isMoving();
         this.isMoving.set(false);
         this.isDragging.set(false);
@@ -738,6 +865,7 @@ class AXDragDirective {
             this.renderer.removeStyle(this.handle(), 'userSelect');
             return;
         }
+        this.renderer.removeStyle(this.element(), 'z-index');
         this.preventClicking();
         const transform = this.element().style.transform;
         let x = 0;
@@ -792,12 +920,15 @@ class AXDragDirective {
         // Update cursor based on whether drop is allowed
         if (listUnderPointer) {
             const cloneEl = this.clonedElement();
-            const cursor = canDrop ? 'move' : 'not-allowed';
-            if (cloneEl) {
-                this.renderer.setStyle(cloneEl, 'cursor', cursor);
+            const cursor = this.resolveDropCursor(!!canDrop);
+            if (this.dragCursorOverride() === 'grab') {
+                this.setActiveDragCursor(cursor);
+            }
+            else if (cloneEl) {
+                this.setElementDropCursor(cloneEl, cursor);
             }
             else {
-                this.renderer.setStyle(this.element(), 'cursor', cursor);
+                this.setElementDropCursor(this.element(), cursor);
             }
         }
         if (targetList !== previousList) {
@@ -815,7 +946,7 @@ class AXDragDirective {
         this._currentDropList()?.sort(e, this);
     }
     canDropInList(list) {
-        if (!list || list.sortingDisabled() || !this._parentDropList) {
+        if (!list || list.isSortingDisabled() || !this._parentDropList) {
             return false;
         }
         if (list === this._parentDropList) {
@@ -959,9 +1090,9 @@ class AXDragDirective {
             constrainedX = clamp(x, minX, maxX);
             constrainedY = clamp(y, minY, maxY);
         }
-        if (this.dragLockAxis() === 'x')
+        if (this.lockAxis() === 'x')
             constrainedY = this.currentAxis().y;
-        if (this.dragLockAxis() === 'y')
+        if (this.lockAxis() === 'y')
             constrainedX = this.currentAxis().x;
         // Direct DOM manipulation without triggering change detection
         this.renderer.setStyle(this.element(), 'translate', `${constrainedX}px ${constrainedY}px`);
@@ -983,9 +1114,9 @@ class AXDragDirective {
             constrainedX = clamp(x, boundaryRect.left, boundaryRect.right - cloneWidth);
             constrainedY = clamp(y, boundaryRect.top, boundaryRect.bottom - cloneHeight);
         }
-        if (this.dragLockAxis() === 'x')
+        if (this.lockAxis() === 'x')
             constrainedY = this.currentCloneAxis().y;
-        if (this.dragLockAxis() === 'y')
+        if (this.lockAxis() === 'y')
             constrainedX = this.currentCloneAxis().x;
         // Direct DOM manipulation without triggering change detection
         this.renderer.setStyle(cloneEl, 'translate', `${constrainedX}px ${constrainedY}px`);