🐛 fix(sortable-list): fix DragOverlay position issues after drag operations

src/SortableList/SortableList.tsx

@@ -4,7 +4,9 @@ import {
   type Active,
   DndContext,
   KeyboardSensor,
+  MeasuringStrategy,
   PointerSensor,
+  closestCenter,
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
@@ -24,8 +26,14 @@ import SortableOverlay from './components/SortableOverlay';
 import { useStyles } from './style';
 import type { SortableListProps } from './type';
 
+const measuringConfig = {
+  droppable: {
+    strategy: MeasuringStrategy.Always,
+  },
+};
+
 const SortableListParent = memo<SortableListProps>(
-  ({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {
+  ({ ref, items, onChange, renderItem, renderOverlay, gap = 8, ...rest }) => {
     const [active, setActive] = useState<Active | null>(null);
     const { styles } = useStyles();
     const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
@@ -36,8 +44,12 @@ const SortableListParent = memo<SortableListProps>(
       }),
     );
 
+    const overlayRenderer = renderOverlay ?? renderItem;
+
     return (
       <DndContext
+        collisionDetection={closestCenter}
+        measuring={measuringConfig}
         modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}
         onDragCancel={() => {
           setActive(null);
@@ -63,7 +75,7 @@ const SortableListParent = memo<SortableListProps>(
             ))}
           </Flexbox>
         </SortableContext>
-        <SortableOverlay>{activeItem ? renderItem(activeItem) : null}</SortableOverlay>
+        <SortableOverlay>{activeItem ? overlayRenderer(activeItem) : null}</SortableOverlay>
       </DndContext>
     );
   },

src/SortableList/demos/index.tsx

@@ -24,14 +24,15 @@ export default () => {
   const [items, setItems] = useState(data);
 
   const store = useCreateStore();
-  const { gap, ...control }: any = useControls(
+  const { gap, useCustomOverlay, ...control }: any = useControls(
     {
       gap: {
         max: 20,
         min: 0,
         step: 1,
         value: 4,
       },
+      useCustomOverlay: false,
       variant: {
         options: ['borderless', 'filled', 'outlined'],
         value: 'borderless',
@@ -52,6 +53,24 @@ export default () => {
             {item.name}
           </SortableList.Item>
         )}
+        renderOverlay={
+          useCustomOverlay
+            ? (item) => (
+                <div
+                  style={{
+                    background: 'rgba(0, 100, 255, 0.1)',
+                    border: '2px dashed #0064ff',
+                    borderRadius: 8,
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    padding: '8px 12px',
+                    transform: 'rotate(2deg)',
+                  }}
+                >
+                  📦 {item.name}
+                </div>
+              )
+            : undefined
+        }
       />
     </StoryBook>
   );

src/SortableList/type.ts

@@ -10,4 +10,9 @@ export interface SortableListProps extends Omit<FlexboxProps, 'onChange'> {
   onChange(items: SortableListItem[]): void;
   ref?: Ref<HTMLUListElement>;
   renderItem(item: SortableListItem): ReactNode;
+  /**
+   * Custom render function for the drag overlay
+   * If not provided, renderItem will be used
+   */
+  renderOverlay?: (item: SortableListItem) => ReactNode;
 }