javascript - React Drag and Drop plugin suggestion

Question

I'm working on with a working model like this:

So here, the left side is a simple list which containse list items. 1. This is not droppable, draggable only 2. After drag, this list remains same all the time.

On the right side, the dragged item will be dropped here.

1. Once the user dragged an item from left side, the other side/ right side should indicate a placeholders to user where they can drop.
2. All the dropped items on the right side can be swappable within right side.
3. Right side area should contain like bootstrap row, column functionality.

I have to achieve something similar to this https://react-email-editor-demo.netlify.com/

Already, I gone through fre react plugins like react dnd and react -beautiful-dnd. I don't get an idea like whether above points are achievable by using these two plugins.

After searched many things,In react-beautiful-dnd, we can't add custom placeholders.

Any help on this, would be grateful.

Answer 1

Here I created for you a small example that tries to replicate the drag in a placeholder behavior from the link you shared above.

Keep in mind that you have total freedom to create how many droppable targets as you want and make them accept different types of items, based on what you specify in accept array of useDrop hook.

I hope it helps.