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

package/README.md

@@ -365,6 +365,19 @@ registry may narrow measured candidates to relevant sortable item, neighbor, or
 container entries before the targeting algorithm runs; the algorithm still makes
 the active-target decision from that narrowed measured list.
 
+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.
+
+`placementBoundary` is used after a preview placement already exists to control
+same-target reversal and hysteresis thresholds. It does not decide the initial
+side for cross-container sortable entry.
+
 ## Modifiers
 
 Modifiers transform pointer movement before drag state updates. Built-ins:

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

@@ -53,9 +53,14 @@ export declare function getSortablePreviewPlacement(input: {
         x: number;
         y: number;
     };
+    midpointPlacementPosition?: {
+        x: number;
+        y: number;
+    };
     movement: SortablePointerMovementState | null;
     previewPlacement: SortablePreviewPlacementState | null;
     options: NormalizedSortableOptions;
+    useMidpointInitialPlacement?: boolean;
 }): SortablePreviewPlacementDecision;
 export declare function isSortablePreviewAlreadyPlaced(input: {
     draggedElement: HTMLElement;

package/dist/sortable/sortable-preview.js

@@ -106,6 +106,9 @@ export function moveSortablePreview(input) {
     if (!listElement) {
         return;
     }
+    const sourceListElement = input.registry.activeDrag.snapshots.get(input.draggedDraggableId)?.parent ??
+        draggedElement.parentElement;
+    const useMidpointInitialPlacement = sourceListElement !== listElement;
     if (!target.capabilities.sortable) {
         return;
     }
@@ -117,9 +120,13 @@ 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,
+        useMidpointInitialPlacement,
     });
     const placement = placementDecision.placement;
     setSortablePreviewPlacementState({
@@ -153,6 +160,7 @@ 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,
@@ -165,12 +173,18 @@ export function getSortablePreviewPlacement(input) {
         previousPlacement.placement === null ||
         previousPlacement.movementDirection === "none") {
         return {
-            placement: getOptimisticPlacement({
-                axis,
-                axisPosition,
-                currentDirection,
-                targetRect,
-            }),
+            placement: input.useMidpointInitialPlacement
+                ? getPlacementSideFromTargetMidpoint({
+                    axis,
+                    axisPosition: midpointAxisPosition,
+                    targetRect,
+                })
+                : getOptimisticPlacement({
+                    axis,
+                    axisPosition,
+                    currentDirection,
+                    targetRect,
+                }),
             movementDirection: currentDirection,
         };
     }
@@ -222,6 +236,12 @@ function getOptimisticPlacement(input) {
         endRatio: neutralPlacementBoundaryRatio,
     }));
 }
+function getPlacementSideFromTargetMidpoint(input) {
+    const targetStart = input.axis === "horizontal" ? input.targetRect.left : input.targetRect.top;
+    const targetSize = input.axis === "horizontal" ? input.targetRect.width : input.targetRect.height;
+    const midpoint = targetStart + targetSize / 2;
+    return input.axisPosition < midpoint ? "before" : "after";
+}
 function getCurrentAxisMovementDirection(input) {
     const axisPosition = getAxisPosition(input.placementPosition, input.axis);
     const previousAxisPosition = input.movement

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mk-drag-and-drop/dom",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Headless DOM drag-and-drop primitives for draggable, droppable, sortable, and grouped interactions.",
   "license": "MIT",
   "homepage": "https://mkramer.dev",
@@ -47,8 +47,8 @@
     "jsdom": "^24.1.3",
     "typescript": "5.5.4",
     "vitest": "^2.1.9",
-    "@repo/typescript-config": "0.0.0",
-    "@repo/eslint-config": "0.0.0"
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
   },
   "scripts": {
     "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",