question: cloning draggable and droppable accordions/drop-down's

[AdrielMendezRios]

hey, sorry if this has been asked before. I'm new to frontend generally and specifically in react. My goal is to find out whether pragmatic drag and drop is a good fit for what I'm working on.

premise: I'm working on a app that has two draggable areas and one droppable. of the draggable areas, one will hold a simple list of draggables and the other will hold a list of draggable areas (each area being, ideally, an accordion/drop-down like list of draggables.).

questions:
is it possible to have the draggable components be 'cloned' when dropped into the droppable target or at the initiation of the drag operation? i want to preserve the draggables in the location where they originate, and drop a clone/copy/duplicate into the droppable area when and if the drag ends within the droppable area.

My second question is whether or not the accordion/drop-down droppable containers are a possibility and whether or not they will keep their 'open' state during re-renders or drap operation at least?

in my current iteration of the app (using dnd-kit) in summary, causes any of the accordion/drop-down's to close whenever any of the parents re-render (whether that be a drag operation starting or a search on an input field being initiated). My suspicions are that either the way I am implementing the logic or dnd-kit (or both but more than likely its my logic) is having these unwanted effect.

I see a lot of benefits in using this library, over dnd-kit (or react-beautiful-dnd even) and i hope that it would be a good fit for this project. if someone can provide me some guidance and/or answers to my questions it would be incredibly helpful. thank you in advance.

[alexreardon]

is it possible to have the draggable components be 'cloned' when dropped into the droppable target or at the initiation of the drag operation?

Yep! You get to decide what actions (eg react state updates) occur in response to a drag operation

in my current iteration of the app (using dnd-kit) in summary, causes any of the accordion/drop-down's to close whenever any of the parents re-render

That is hard to debug without seeing the code. But it sounds like your component is being unmounted and re-mounted rather than just re-rendered (assuming the open / closed state is in react state).

Some possibilities:

• if you are rendering list items without the key prop, then a re-render will cause all items to unmount and re-mount.
• dnd-kit might be causing your component to re-mount