React-grid-layout: How to drag external element into grid?

[naivefun]

For example there is a widget list and one can drag those elements into grid?

[GnatLlib]

I am actually working on almost this exact issue right now. So far my first attempt at a solution is using the react-dnd library, and setting the grid-surface as a dropTarget. You can then drag components onto the grid and trigger a component to be added.

However, I am running into the awkward issue of having to decided where a new component will be placed on a grid which might already have many components on it. It is relatively straightforward to just place the new components on the bottom leftmost location where it will fit or something, but this isn't quite the ideal behavior I am looking for.

I am trying to find out if it is possible to create a new grid component in the "dragging" state, then you could trigger the item creation from a widget sidebar and a new component would appear under your mouse just as if you had picked up a component from the grid.

Let me know if you manage to figure anything out, and if anyone else has ideas/experience with this issue any help is appreciated!

[naivefun]

@GnatLlib It just came to my mind how this should be done.

I'm thinking to do it this way (not verified):

• watch external element's drag move event
• when the element gets through the border of the grid, create a grid element
• dispatch drag/move events to the new element along with the positions of mouse

any bugs in this solution?

[pingbaohua]

我用react dnd拖到网格中了，但是不能拖拽到我鼠标指定的位置，我用react dnd时候给列表的小部件重新添加了left,top值，然后放到transform中，但是还是不能在我鼠标指定的位置，是因为item中x,y,w,h的原因吧；上面的问题有解决吗

[fairps]

There have been a number of people (including me) wanting this. There is a pull requests that has been hanging out there for a couple of years now for it as well. People have implemented this with react-dnd but I would recommend against that because that is using HTML5 drag/drop and RGL is based on react-draggable, which uses CSS transforms for the dragging. (You can use react-draggable too... very easy to use).
What I am currently trying to do is drag between 2 RGL's, but I am having trouble with layouts not correctly realizing they have been modified... other than that it is working. I am taking the position that the user can drop into the second layout and the vertical packing will take care of arranging the item. Not perfect but it works. Except for the layouts not updating unless I set them to [] before modifying them.

[myzhibie]

same scenario，how can I implement this?

[Amir2828]

I am actually working on almost this exact issue right now. So far my first attempt at a solution is using the react-dnd library, and setting the grid-surface as a dropTarget. You can then drag components onto the grid and trigger a component to be added.

However, I am running into the awkward issue of having to decided where a new component will be placed on a grid which might already have many components on it. It is relatively straightforward to just place the new components on the bottom leftmost location where it will fit or something, but this isn't quite the ideal behavior I am looking for.

I am trying to find out if it is possible to create a new grid component in the "dragging" state, then you could trigger the item creation from a widget sidebar and a new component would appear under your mouse just as if you had picked up a component from the grid.

Let me know if you manage to figure anything out, and if anyone else has ideas/experience with this issue any help is appreciated!

Did you manage to figure it out?

[fairps]

I also solved this using react-dnd. It's not perfect yet by any means but I have a proof of concept, and react-grid-layout is able to successfully adapt the layout to the created item if I create the item off screen and then move it into the desired position. The only bummer is the user drags the item and drops it, and then sees the item animate in from off screen as it moves into position. (A column of my RGL is outside the physical view area and being clipped... so I can create stuff there in a column the user can't see)

[NunoCardoso]

@fairps any change you can share the code? I am also doing something with react-dnd and using hover to create a temp component

[ni-ra]

This is my proof-on-concept.
https://codesandbox.io/s/github/ni-ra/rgltest

[github-actions[bot]]

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]

It's not stale, just being ignored

[aIacoella]

This is my proof-on-concept.
https://codesandbox.io/s/github/ni-ra/rgltest

Hi, This proof on concept is amazing. Unfortunately, I think there's an issue with the latest version of react-grid-layout that results in a bug when dropping the element on the grid