How to drag a item between two ReactGridLayout

[SunXinFei]

• Bug
• Feature Request
• Question

<ReactGridLayout layout={this.state.layout1}> {this.generateDOM()} </ReactGridLayout> <ReactGridLayout layout={this.state.layout2} > {this.generateDOM()} </ReactGridLayout>
anyone resolve this question?

[fairps]

I understand why you want this (I do too) but it is because I am using the control as something other than a layout control. The feature you are looking for is available in react-beautiful-dnd which allows lists and dragging between those lists. I'm considering moving to that control for what I am doing that doesn't involve layout and using this control for layout as it was intended :-)

[SunXinFei]

@fairps thankyou, but react-beautiful-dnd is only for list , the ReadMe.md say

Not for everyone
There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. react-beautiful-dnd is a higher level abstraction specifically built for vertical and horizontal lists. Within that subset of functionality react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So this library might not be for you depending on what your use case is.

so I will try to use react-dnd to ceate a wheel project just like GridLayout.

[fairps]

This issue is really a duplicate of #688... I've looked at this much further after my last comment... maybe PR #684 that is waiting to be merged might allow react-grid-layout to act as a drop target for incoming objects. Don't underestimate the amount of work that has been done in react-grid-layout and react-beautiful-dnd beyond what react-dnd is offering out of the box... both are using react-motion to provide a drag experience that feels natural. For me, the only difference right now between react-grid-layout and react-beautiful-dnd with a series of side by side lists is the inability to resize elements and have them extend across those columns (lists). If PR #684 will allow the drop target, then I will use react-beautiful-dnd to create a toolbox of sorts and drag items from it into my primary react-grid-layout... or at least that's how I am leaning at the moment.

[SunXinFei]

@fairps Yeah, I had used react-dnd successfully to complete card grid layout and move card to other list, see this in my drag gif.

[martinwebrant]

@SunXinFei got a sample for that? About to do that myself!

[SunXinFei]

@martinwebrant react-grid-layout-between, you can view this code, but sorry I did not have a sample for that, maybe complete the project，free time will commit a sample templete.
I have been optimizing drag and drop render performance these days，

[fairps]

@SunXinFei thanks for posting that link. I Really appreciate it.

[SunXinFei]

@fairps ，recently I have been optimizing and modifying this code ，here is the react-grid-layout-between， it can be horizontal or vertical,

[blizzerand]

@SunXinFei Hey, I've run into some trouble starting your code. Does it still work?

[SunXinFei]

@SunXinFei Hey, I've run into some trouble starting your code. Does it still work?

@blizzerand oh! I create the project react-grid-layout-between. you can run it, maybe it can help you . when i'm not busy , i will create the component.Live demo: http://demo.sunxinfei.com/

[blizzerand]

@SunXinFei Thank you! Works perfectly well :)

[SunXinFei]

@SunXinFei Thank you! Works perfectly well :)

@blizzerand yeah, just a moment ago, I added the logic about switch Compaction Type: horizontal || vertical.
Live demo: http://demo.sunxinfei.com/

[akshaygoyal88]

@SunXinFei Have you completed the awesome functionality?

@fairps Yeah, I had used react-dnd successfully to complete card grid layout and move card to other list, see this in my drag gif.

[SunXinFei]

@SunXinFei Have you completed the awesome functionality?

@fairps Yeah, I had used react-dnd successfully to complete card grid layout and move card to other list, see this in my drag gif.

you can view this project https://github.com/SunXinFei/react-grid-layout-between

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days

[fairps]

Not stale just ignored

[siccoo]

Hi Good morning all, please I want to achieve this http://mmoinuddin.com/assets/img/grid-layout-dnd.gif, the goal is to extend the algorithm, so a module can move within the layout container. The module can't move outside of the top, right, and left edges of the layout container. The bottom edge behaves differently. When a module is moved downwards beyond the bottom edge, the bottom edge should also move downwards to extend the height of the layout container. Also, Module objects cannot overlap each other.

So how can I achieve that using React-typescript

[spedy]

I solved it by creating two grids with isDraggable to false and followed the "Drag from outside" example.

[siccoo]

@spedy please can I see the code of how you implemented it .