@mk-drag-and-drop/dom 0.4.2 → 0.4.3

package/README.md

@@ -369,10 +369,10 @@ Same-container sortable preview keeps its movement-responsive first-placement
 behavior: forward movement places after a newly active target, backward movement
 places before, and no sortable-axis movement uses the target midpoint. When a
 sortable item first enters a different DOM container, the initial side is based
-on the pointer position against the target midpoint on the sortable axis: above
-or left of midpoint places before, while below or right of midpoint places
-after. Rect-based targeting such as `centerToCenter` still selects the active
-target; cross-container initial preview side follows the pointer.
+on the current sortable placement position against the target midpoint on the
+sortable axis: above or left of midpoint places before, while below or right of
+midpoint places after. Pointer-based targeting uses the pointer as that position;
+rect-based targeting such as `centerToCenter` uses the overlay center.
 
 `placementBoundary` is used after a preview placement already exists to control
 same-target reversal and hysteresis thresholds. It does not decide the initial

package/dist/sortable/sortable-preview.d.ts

@@ -12,6 +12,8 @@ export type SortablePreviewPlacementState = {
     activeDropTargetId: string | null;
     placement: SortablePlacementSide | null;
     movementDirection: SortableAxisMovementDirection;
+    containerElement: HTMLElement | null;
+    pendingMidpointInitialPlacement: boolean;
 };
 export type SortablePreviewPlacementDecision = {
     placement: SortablePlacementSide;
@@ -36,10 +38,6 @@ export declare function moveSortablePreview(input: {
     runtime: DomSortableRuntime;
     draggedDraggableId: string;
     activeDropTargetId: string | null;
-    pointerPosition: {
-        x: number;
-        y: number;
-    };
     placementPosition: {
         x: number;
         y: number;
@@ -53,10 +51,6 @@ export declare function getSortablePreviewPlacement(input: {
         x: number;
         y: number;
     };
-    midpointPlacementPosition?: {
-        x: number;
-        y: number;
-    };
     movement: SortablePointerMovementState | null;
     previewPlacement: SortablePreviewPlacementState | null;
     options: NormalizedSortableOptions;

package/dist/sortable/sortable-preview.js

@@ -76,10 +76,15 @@ export function moveSortablePreview(input) {
     addRegistrationContainerId(measurementIds, target);
     if (target.capabilities.container) {
         measurementIds.add(target.id);
+        const previousListElement = input.registry.activeDrag.previewPlacement?.containerElement ?? null;
+        const pendingMidpointInitialPlacement = draggedElement.parentElement !== target.element ||
+            (previousListElement !== null && previousListElement !== target.element);
         setSortablePreviewPlacementState({
             registry: input.registry,
             activeDropTargetId: target.id,
             placement: null,
+            containerElement: target.element,
+            pendingMidpointInitialPlacement,
             movementDirection: getCurrentAxisMovementDirection({
                 placementPosition: input.placementPosition,
                 movement: input.registry.activeDrag.pointerMovement,
@@ -106,9 +111,13 @@ export function moveSortablePreview(input) {
     if (!listElement) {
         return;
     }
-    const sourceListElement = input.registry.activeDrag.snapshots.get(input.draggedDraggableId)?.parent ??
-        draggedElement.parentElement;
-    const useMidpointInitialPlacement = sourceListElement !== listElement;
+    const previousPlacement = input.registry.activeDrag.previewPlacement;
+    const previousListElement = previousPlacement?.containerElement ?? null;
+    const useMidpointInitialPlacement = draggedElement.parentElement !== listElement ||
+        (previousListElement !== null && previousListElement !== listElement) ||
+        (previousPlacement?.placement === null &&
+            previousPlacement.pendingMidpointInitialPlacement &&
+            previousListElement === listElement);
     if (!target.capabilities.sortable) {
         return;
     }
@@ -120,9 +129,6 @@ export function moveSortablePreview(input) {
         activeDropTargetId,
         targetElement,
         placementPosition: input.placementPosition,
-        midpointPlacementPosition: useMidpointInitialPlacement
-            ? input.pointerPosition
-            : input.placementPosition,
         movement: input.registry.activeDrag.pointerMovement,
         previewPlacement: input.registry.activeDrag.previewPlacement,
         options: input.options,
@@ -134,6 +140,8 @@ export function moveSortablePreview(input) {
         activeDropTargetId,
         placement,
         movementDirection: placementDecision.movementDirection,
+        containerElement: listElement,
+        pendingMidpointInitialPlacement: false,
     });
     if (isSortablePreviewAlreadyPlaced({
         draggedElement,
@@ -160,7 +168,6 @@ export function moveSortablePreview(input) {
 export function getSortablePreviewPlacement(input) {
     const axis = input.options.axis;
     const axisPosition = getAxisPosition(input.placementPosition, axis);
-    const midpointAxisPosition = getAxisPosition(input.midpointPlacementPosition ?? input.placementPosition, axis);
     const targetRect = input.targetElement.getBoundingClientRect();
     const currentDirection = getCurrentAxisMovementDirection({
         placementPosition: input.placementPosition,
@@ -172,19 +179,24 @@ export function getSortablePreviewPlacement(input) {
         previousPlacement.activeDropTargetId !== input.activeDropTargetId ||
         previousPlacement.placement === null ||
         previousPlacement.movementDirection === "none") {
+        if (input.useMidpointInitialPlacement) {
+            const placement = getPlacementSideFromTargetMidpoint({
+                axis,
+                axisPosition,
+                targetRect,
+            });
+            return {
+                placement,
+                movementDirection: getMovementDirectionFromPlacementSide(placement),
+            };
+        }
         return {
-            placement: input.useMidpointInitialPlacement
-                ? getPlacementSideFromTargetMidpoint({
-                    axis,
-                    axisPosition: midpointAxisPosition,
-                    targetRect,
-                })
-                : getOptimisticPlacement({
-                    axis,
-                    axisPosition,
-                    currentDirection,
-                    targetRect,
-                }),
+            placement: getOptimisticPlacement({
+                axis,
+                axisPosition,
+                currentDirection,
+                targetRect,
+            }),
             movementDirection: currentDirection,
         };
     }
@@ -219,6 +231,8 @@ function setSortablePreviewPlacementState(input) {
         activeDropTargetId: input.activeDropTargetId,
         placement: input.placement,
         movementDirection: input.movementDirection,
+        containerElement: input.containerElement,
+        pendingMidpointInitialPlacement: input.pendingMidpointInitialPlacement,
     };
 }
 function getOptimisticPlacement(input) {
@@ -242,6 +256,9 @@ function getPlacementSideFromTargetMidpoint(input) {
     const midpoint = targetStart + targetSize / 2;
     return input.axisPosition < midpoint ? "before" : "after";
 }
+function getMovementDirectionFromPlacementSide(placement) {
+    return placement === "before" ? "backward" : "forward";
+}
 function getCurrentAxisMovementDirection(input) {
     const axisPosition = getAxisPosition(input.placementPosition, input.axis);
     const previousAxisPosition = input.movement

package/dist/sortable/sortable-registry.js

@@ -34,7 +34,6 @@ export function getSortableRegistry(runtime) {
                     runtime,
                     draggedDraggableId: event.draggableId,
                     activeDropTargetId: event.activeDropTargetId,
-                    pointerPosition: event.pointerPosition,
                     placementPosition: event.placementPosition ?? event.pointerPosition,
                     options: getSortableOptions(registry, event.draggableId),
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mk-drag-and-drop/dom",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Headless DOM drag-and-drop primitives for draggable, droppable, sortable, and grouped interactions.",
   "license": "MIT",
   "homepage": "https://mkramer.dev",