React-grid-layout: Is it possible to nest ReactGridLayouts? Is it possible to drag from outside to create elements? Is it possible to drag from one layout to another?

[andrerpena]

First, thanks for this. Incredible work. I'm evaluating whether I can use it for a project. So I have these questions:

1. Is it possible to nest ReactGridLayouts?
2. Is it possible to drag from outside to create elements? One use-case that I have is to allow the user to drag from a component list into the ReactGridLayout. This would be equivalent to the "add element" sample except that I'm dragging instead of clicking "add element".
3. Is it possible to drag from one ReactGridLayout to another?

Thank you very much and keep up the good work.

[piffarettig]

I am wondering exactly the same as you. It could be great to know if that could be done (dragging from outside the grid).

Any idea if that's possible? Or maybe any suggestions on how to implement that easily without using simple JavaScript with onDragStart,onDragOver and onDrop events? That allows me to do drag from outside the layout but I cant take advantage of the dragging the react-grid-layout has...

Thanks! This library is really cool.

[JaneCoder]

Number one is possible. I have put ReactGridLayouts inside of items that are in a ReactGridLayout. Use the props that allow you to set areas of dragging and no-dragging for each grid to make sure the inner draggables are in a no-drag zone from the point of view of the outer draggable.

[JaneCoder]

On numbers 2 and 3, I think you would have to 'make that happen' yourself. I thought about doing this too.

I was going to create some draggables that disappear on drag when they are over the grid I want to drop them on, and then programmatically add the item to the grid. So it would be an illusion that they 'moved there'.

It would be an interesting feature to have this functionality in the project though.

[andrerpena]

Thanks @JaneCoder , at least 1 is OK. I'm not sure about how to implement 2 and 3, so let's hope it gets introduced to the project.

[STRML]

Addressed in #289. This is not a planned extension.

[davidgeilfus]

Hi @JaneCoder, did you manage to implement that fake drag from outside of the layout you were mentioning above? Or did you find any other solution? Thank you very much! Kind regards

[JaneCoder]

I ended up not needing to implement the fake drag. Sorry I don't have any help on this one.

[davidgeilfus]

Thank you @JaneCoder!

[reyronald]

Hello!

I know that variations of this question have been addressed in multiple issues so far, from what I could find #285, #288, #289, #305, #358 and #614, but this is the only one that has some meaningful discussion.

I'm in need of something similar and I do actually have the time and willingness to implement it. For my use case what I need is drag a layout item from grid A to grid B, as simple as that. @STRML how would you go at achieving this? Can you give me some pointers before I start? Is it possible without disturbing too much of the current code base of the library? Would you review/accept a PR of such functionality if coded properly?

[samiyaakhtar]

^Agreed, and looking for implementing something similar as well. @STRML

[sroemerJanitza]

@reyronald @samiyaakhtar
Any news regarding your development?

[aditya-padhi-kbl]

I tried with react-dnd with react-grid-layout to move i . griditem into other grid item , but it didn't work. Seems like if some of the APIs of RGL is exposed then we can integrate with react-dnd

[adagar4]

This could be done using react-dnd with react-grid-layout.
Create react-dnd drag-source on your component list from where you want to drag the element and drag target on the top of react-grid-layout element and pass the data necessary from drag source to drag target and update the state of the component which has drag target and react-grid-layout and use it to add elements to react-grid-layout