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

package/README.md

@@ -365,6 +365,17 @@ 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 target midpoint on the sortable axis: above or left of midpoint places
+before, while below or right of midpoint places after.
+
+`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

@@ -56,6 +56,7 @@ export declare function getSortablePreviewPlacement(input: {
     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,7 @@ export function moveSortablePreview(input) {
     if (!listElement) {
         return;
     }
+    const useMidpointInitialPlacement = draggedElement.parentElement !== listElement;
     if (!target.capabilities.sortable) {
         return;
     }
@@ -120,6 +121,7 @@ export function moveSortablePreview(input) {
         movement: input.registry.activeDrag.pointerMovement,
         previewPlacement: input.registry.activeDrag.previewPlacement,
         options: input.options,
+        useMidpointInitialPlacement,
     });
     const placement = placementDecision.placement;
     setSortablePreviewPlacementState({
@@ -165,12 +167,18 @@ export function getSortablePreviewPlacement(input) {
         previousPlacement.placement === null ||
         previousPlacement.movementDirection === "none") {
         return {
-            placement: getOptimisticPlacement({
-                axis,
-                axisPosition,
-                currentDirection,
-                targetRect,
-            }),
+            placement: input.useMidpointInitialPlacement
+                ? getPlacementSideFromTargetMidpoint({
+                    axis,
+                    axisPosition,
+                    targetRect,
+                })
+                : getOptimisticPlacement({
+                    axis,
+                    axisPosition,
+                    currentDirection,
+                    targetRect,
+                }),
             movementDirection: currentDirection,
         };
     }
@@ -222,6 +230,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.1",
   "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 })\"",