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) }

[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);
  }
}

};