diff --git a/package.json b/package.json index 288dcab..ca064e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-align", - "version": "1.1.5", + "version": "1.1.6", "author": "KaWaite", "module": "dist/realign.esm.js", "license": "MIT", diff --git a/src/Grid/GridItem/index.tsx b/src/Grid/GridItem/index.tsx index 8c1d4e2..1a01789 100644 --- a/src/Grid/GridItem/index.tsx +++ b/src/Grid/GridItem/index.tsx @@ -73,6 +73,7 @@ export default function GridItem({ const { enabled } = useEditorMode(); const [isHovered, setHovered] = useState(false); + const dragIndexRef = useRef(); const handleExtend = () => { if (!extendable || !onExtend) return; @@ -132,27 +133,36 @@ export default function GridItem({ } } - onReorder(item.id, location, dragIndex, hoverIndex); + dragIndexRef.current = dragIndex; + }, + drop(item) { + if (dragIndexRef.current !== undefined) { + onReorder(item.id, location, dragIndexRef.current, index); + dragIndexRef.current = undefined; + } }, }); - const [{ isDragging }, drag, preview] = useDrag({ - type: ItemType.ITEM, - item: { id, index }, - canDrag: draggable ?? enabled, - end: (item, monitor) => { - const dropResults: { - location: T; - } | null = monitor.getDropResult(); + const [{ isDragging }, drag, preview] = useDrag( + { + type: ItemType.ITEM, + item: { id, index }, + canDrag: draggable ?? enabled, + end: (item, monitor) => { + const dropResults: { + location: T; + } | null = monitor.getDropResult(); - if (dropResults && dropResults.location !== location) { - onMoveArea(item.id, dropResults.location, location); - } + if (dropResults && dropResults.location !== location) { + onMoveArea(item.id, dropResults.location, location); + } + }, + collect: (monitor: DragSourceMonitor) => ({ + isDragging: monitor.isDragging(), + }), }, - collect: (monitor: DragSourceMonitor) => ({ - isDragging: monitor.isDragging(), - }), - }); + [dragIndexRef] + ); preview(drop(ref)); // ***************************************