diff --git a/src/components/tile/SortableTile.js b/src/components/tile/SortableTile.js index bce4227..58ff0b8 100644 --- a/src/components/tile/SortableTile.js +++ b/src/components/tile/SortableTile.js @@ -4,7 +4,7 @@ import { useDroppable } from "@dnd-kit/core"; import { useSortable } from "@dnd-kit/sortable"; import { animated, useSpring } from "react-spring"; -function Sortable({ id, disableGrouping, hidden, children }) { +function SortableTile({ id, disableGrouping, hidden, children, type }) { const { attributes, listeners, @@ -13,10 +13,10 @@ function Sortable({ id, disableGrouping, hidden, children }) { setDraggableNodeRef, over, active, - } = useSortable({ id }); + } = useSortable({ id, data: { type } }); const { setNodeRef: setGroupNodeRef } = useDroppable({ id: `__group__${id}`, - disabled: disableGrouping, + disabled: disableGrouping || active?.data?.current?.type === "group", }); const dragStyle = { @@ -82,4 +82,4 @@ function Sortable({ id, disableGrouping, hidden, children }) { ); } -export default Sortable; +export default SortableTile; diff --git a/src/components/tile/SortableTiles.js b/src/components/tile/SortableTiles.js index c6dcf63..6ee2f52 100644 --- a/src/components/tile/SortableTiles.js +++ b/src/components/tile/SortableTiles.js @@ -42,7 +42,7 @@ function SortableTiles({ onTileSelect(active.id); } - function handleDragMove({ over }) { + function handleDragOver({ over }) { setOverId(over?.id); } @@ -95,8 +95,8 @@ function SortableTiles({ return ( @@ -107,6 +107,7 @@ function SortableTiles({ key={group.id} disableGrouping={disableGrouping} hidden={group.id === openGroupId} + type={group.type} > {renderSortableGroup(group)}