Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested Drag and Drop After Child level #2657

Open
Subhwebninjaz opened this issue Aug 9, 2024 · 2 comments
Open

Nested Drag and Drop After Child level #2657

Subhwebninjaz opened this issue Aug 9, 2024 · 2 comments

Comments

@Subhwebninjaz
Copy link

@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 .
Screenshot 2024-08-09 at 6 19 13 PM

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
Copy link
Author

Subhwebninjaz commented Aug 23, 2024

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
Screenshot 2024-08-23 at 4 10 20 PM

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

};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants
@Subhwebninjaz and others