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

package/README.md

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

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

@@ -53,6 +53,10 @@ 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

@@ -106,7 +106,9 @@ export function moveSortablePreview(input) {
     if (!listElement) {
         return;
     }
-    const useMidpointInitialPlacement = draggedElement.parentElement !== listElement;
+    const sourceListElement = input.registry.activeDrag.snapshots.get(input.draggedDraggableId)?.parent ??
+        draggedElement.parentElement;
+    const useMidpointInitialPlacement = sourceListElement !== listElement;
     if (!target.capabilities.sortable) {
         return;
     }
@@ -118,6 +120,9 @@ 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,
@@ -155,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,
@@ -170,7 +176,7 @@ export function getSortablePreviewPlacement(input) {
             placement: input.useMidpointInitialPlacement
                 ? getPlacementSideFromTargetMidpoint({
                     axis,
-                    axisPosition,
+                    axisPosition: midpointAxisPosition,
                     targetRect,
                 })
                 : getOptimisticPlacement({

package/package.json

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