Drop Indicator Without Moving Draggable Source

[BrianHung]

Is there a way to show a drop indicator without moving the draggable source?

Good example is in Figma where they should you a black bar representing the drop indicator but keeping the source in palce.

[clauderic]

Yes, refer to these two examples:

https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-pages-layout--grid
https://github.com/clauderic/dnd-kit/tree/master/stories/3%20-%20Examples/Advanced/Pages

https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--drop-indicator
https://github.com/clauderic/dnd-kit/tree/master/stories/3%20-%20Examples/Tree

If you don't want to move the draggable source at all, don't pass it the transform property and don't use <DragOverlay>.

[BrianHung]

Trying to modify this

dnd-kit/stories/3 - Examples/Advanced/Pages/Pages.tsx

Lines 190 to 196 in 17ab9ce

	insertPosition={
	over?.id === id
	? index > activeIndex
	? Position.After
	: Position.Before
	: undefined
	}

to use instead the pointer position and the hovered over rectangle midpoint

   over?.id === id 
     ? pointerY > (rect.top + rect/bottom) / 2 // midpoint
       ? Position.After 
       : Position.Before 
     : undefined 

Is there a way to access the current pointer position relative to the same rectangles as over.rect?