Nested Drag and Drop After Child level

[Subhwebninjaz]

@collab-with-tushar-raj @alexreardon @DeolaJ @debo07 @tnhu
Hi guys I am facing similar to same issue , My scenario is little complex . Working in Next js.
if you see the attached screenshot

Depth 0 question is : Do you have Card??
Depth 1 questions are : "Card Type ?" and "Card Company?"
Depth 2 questions are : "which Bank" and "CVV number"
Depth 3 question is : "Specify your bank"

Now in Depth 0(Root Level) I can easily reorder the questions also in Depth 1(Child Level) I can easily reorder the questions with the help of react-beautiful-DND but after child level I mean after depth 1 in Any depth i am not able to reorder the questions or items with DND .

Getting wrong destination in when i tried to reorder nested child from depth 2 , but perfectly working in depth 1.
const onDragEnd = (result) => {
const { source, destination } = result;
console.log(source, destination)
}

[neehhaa06]

Hello!! @Subhwebninjaz :)

Assign Unique droppableId:

    Ensure each Droppable has a unique droppableId based on its depth and position.

Correct index in Draggable:

    Pass the correct index to each Draggable based on its position within its parent.

Handle onDragEnd:

    Log the result object.
    Implement moveItem(source, destination) to update the state based on source and destination.

Use Recursive Rendering:

    Create a recursive component to render nested items, passing the appropriate droppableId, index, and depth.

Test and Refine:

    Test drag-and-drop at all levels and refine the logic if needed.

[Subhwebninjaz]

Hi @neehhaa06 , thank you for your response , I am using Recursive Rendering for every question Item. Also, I think i am using unique Id also if you see the attached screenshot

i have two questionItem under "others" option

1. specify your bank ( it's id is data-rbd-draggable-id="question-yhx9ady-q346pum" { first li item} )
   2.Please write your bank location ( it's id is data-rbd-draggable-id="question-yhx9ady-1wsd323" { second li item} )

now here the the format of every question
question-yhx9ady-q346pum =>
question- "question group ID" -question id

now come to it's parent Ul which have this id : data-rbd-droppable-id="child-questions-yhx9ady-10i0vxt-nmxtcps"
child-questions-yhx9ady-10i0vxt-nmxtcps =>
child-questions - "question group ID" - "parent question ID ( that question's ID which have those 3 options PNB,SBI,Others)" - "optionID(the specific parent option's ID. ex: id of "others" )"

now when i try to reorder second question (bank location) to first question. I Got This from console.log(source, destination)
source : {
"index": 1,
"droppableId": "child-questions-yhx9ady-10i0vxt-nmxtcps"
}
destination:{
"droppableId": "child-questions-yhx9ady-c237tjf-avrdhmn",
"index": 1
}

here source is correct but destination should be
{
"index": 0,
"droppableId": "child-questions-yhx9ady-10i0vxt-nmxtcps"
}

soo here is the issue .
Also as I mentioned i got correct source, destination till depth 1.

my function

const onDragEnd = (result) => {
const { source, destination } = result;
console.log(source, destination)

// Dropped outside the list
if (!destination) return;

if (source.droppableId.startsWith("group") && destination.droppableId.startsWith("group")) {
  const sourceGroupId = source.droppableId.split("-")[1];
  const destGroupId = destination.droppableId.split("-")[1];
  const questionId = result.draggableId.split("-")[2];

  if (source.droppableId === destination.droppableId) {
    // Reschedule root level questions within the same group
    reorderQuestionsInGroup(source.droppableId.split("-")[1], source.index, destination.index);
  } else {
    // Move a root level question from one group to another
    moveQuestionBetweenGroups(source, destination);

    // this below part fixiing collapse issue of hierarchy
    const movedQuestion = prepareQuestionsForVisibilityUpdate(questionId, groups);
    updateVisibilityForNestedQuestions(movedQuestion, destGroupId);

  }
} else if (source.droppableId === "all-groups" && destination.droppableId === "all-groups") {

  reorderGroups(source.index, destination.index);
}
if (source.droppableId.startsWith("child-questions-") && destination.droppableId.startsWith("child-questions-")) {
  const parts = source.droppableId.split('-');
  const groupId = parts[2];
  const parentQuestionId = parts[3];
  const optionId = decodeURIComponent(parts.slice(4).join('-')); 
  console.log(groupId, parentQuestionId, optionId, source.index, destination.index)
  if (source.droppableId === destination.droppableId) {
    reorderChildQuestions(groupId, parentQuestionId, optionId, source.index, destination.index);
  }
}

};