Fix - parent element (e.g. div) with nested children inside of it can now be drag and dropped to be repositioned. Rename function inside of SeparatorChild.tsx from DirectChildHTMLNestable to SeparatorChild to not cause confusion, as a different DirectChildHTMLNestable function already exists inside DirectChildHTMLNestable.tsx

Author: johnwage

app/src/components/main/SeparatorChild.tsx

@@ -16,7 +16,7 @@ import {
 } from '../../redux/reducers/slice/appStateSlice';
 import { emitEvent } from '../../helperFunctions/socket';
 
-function DirectChildHTMLNestable({
+function SeparatorChild({
   childId,
   type,
   typeId,
@@ -165,4 +165,4 @@ function DirectChildHTMLNestable({
   );
 }
 
-export default DirectChildHTMLNestable;
+export default SeparatorChild;

app/src/helperFunctions/changePositionValidation.ts

@@ -18,7 +18,11 @@ const validateNewParent = (
     nestedParent = false
   ): boolean => {
     for (const element of array) {
-      if (element.childId === toTargetParentId && nestedChild === true)
+      if (
+        element.childId === toTargetParentId &&
+        nestedChild === true &&
+        element.typeId > 1000 // check if not a separator (1000) or previously dragged component (> 1000)
+      )
         return (nestedParent = true);
       else if (
         element.childId === currentChildId &&