diff --git a/apps/cs/src/pages/menu/lib/utils.ts b/apps/cs/src/pages/menu/lib/utils.ts index a7bc514a3..53e79918d 100644 --- a/apps/cs/src/pages/menu/lib/utils.ts +++ b/apps/cs/src/pages/menu/lib/utils.ts @@ -26,8 +26,16 @@ export const generateNewTreeData = ( options: DropOptions, ): TreeMenu | null => { const { dragSourceId, dragSource, dropTargetId, dropTarget } = options; + if (!dragSource?.data) return null; + const siblings = treeData.filter( + (node) => node.parent === dragSource?.parent, + ); + + const newSortSeq = + siblings.findIndex((sibling) => sibling.id === dragSourceId) + 1; + const childNodes = treeData.filter( (node) => node.parent === dragSourceId && node.data, ); @@ -44,7 +52,7 @@ export const generateNewTreeData = ( const treeMenu: TreeMenu = { ...baseNode(dragSource), parentId: dropTargetId === 0 ? null : (dropTargetId as number), - sortSeq: (dropTarget?.data?.children?.length ?? 0) + 1, + sortSeq: newSortSeq, levelNo: (dropTarget?.data?.levelNo ?? 0) + 1, }; diff --git a/apps/cs/src/pages/menu/ui/menu-tree.tsx b/apps/cs/src/pages/menu/ui/menu-tree.tsx index d169d2149..b399747f4 100644 --- a/apps/cs/src/pages/menu/ui/menu-tree.tsx +++ b/apps/cs/src/pages/menu/ui/menu-tree.tsx @@ -56,12 +56,25 @@ function MenuTree({ treeData, siteId }: MenuTreeProps) { classes={{ root: "p-4", container: "flex flex-col", - listItem: "", dropTarget: "!bg-[rgba(32,148,250,0.5)] rounded-sm", - draggingSource: "", - placeholder: "", + placeholder: "relative", }} sort={false} + dropTargetOffset={10} + insertDroppableFirst={false} + canDrop={(_, { dragSource, dropTargetId }) => { + if (dragSource?.parent === dropTargetId) { + return true; + } + }} + placeholderRender={(_, { depth }) => { + return ( +
+ ); + }} /> );