Dragging widget into parent grid and nested child grid

[ygalanter]

I am trying to create this behavior and not sure whether Gridstack supports it or not. I have 3 grids: Grid1, Grid2, and Grid3. Grid1 is a standalone grid and Grid3 is nested inside Grid2. I need to be able to drag widgets from Grid1 both into Grid2 (outer grid) and into Grid3 (nested grid). Following samples I was able to drag widgets between 2 top level grids and create a nested grid, but not combining these 2 together. If this is supported - any pointers are appreciated.

[DamonMuscle]

@ygalanter I just meet the same problem? Have you resolve this problem? If so, how? Looking forword for your reply. Thank you very much.

[Altraya]

I think you can take a look at this #133. I think you need to play with the property "AcceptWidget" and css selector to achieve this.

[adumesny]

#1105 I just checked in will get you almost there - I updated nested.html to show drag&drop between 2 nested grids, but dragging a regular item into another nested one has tons of issues - it wants to push the outer one first, then can drop into it - causing issues of 2 drop targets. You can un-comment some settings to try.

Not an easy fix

[adumesny]

@RdeWilde in https://gridstackjs.com/demo/nested.html

1. do you expect "regular item" (green) to move "nested 1" out of the way and also being able to be dropped it inside (becoming a pink item) ? if so we can't have both without an explicit Alt key press or something... which is somewhat hidden, but I don't think we can differentiate using just gesture.

2. dragging pink item "0" to parent yellow grid doesn't need special key (gesture explicit of dragging out, then will be be parented by yellow and push items, unless Alt key... BUT that doesn't work work moving pink between subgrids as it would leave and go to parent first). this is why this is tricky...

3. can "regular item" be turned into a nested grid (drag another item into it, with Alt key) and would you need to say ahead of time what items can become nested grid and which ones cannot ? see 4

4. in the demo nested 1 & 2 have 6 columns layout (parent 12) - if we automatically convert any item into a grid, what column count would we use (set it per item config ?)

5. if I drag item0 over item1 with Alt key to drop into, do I convert item1 into subgrid of how many columns ? since item0 is same size (or could be bigger) it would take entire item1 columns - not clear what's expected here.

as you can see this is not easy to even design...

[RdeWilde]

Thanks @adumesny for setting an outline. I have limited experience ofcourse, you are the expert here, but here's my thought:

• Using a key is fine with me.
• Or you have to divide items into different drop targets. 33% left is insert left, 33% right is insert right, other 34% is nest inside.
• Or you can have an icon inside the div to start dragging for nesting. Stripo has such labels in their editor
• Or show a context menu/popup on drop about what action to take

2. I don't get it, but i do understand it is not easy. Maybe check how other ui's handle this?

3. For my use case, I have a special type, so I can mark them as subgrids ahead of time. But if you can make it more generic, that would probably help other people a lot. But it's fine with me for now to keep scope small and only be able to drag into these special types.

4. Same number of columns as before, with max of grid column size. I think you can't really convert it, converting 6/12 to */5 would require rounding. I would just keep it as is.

5. As said in 3) I'm fine with this being out of scope for now.
   If you WOULD implement it, it depends on how/where the subgrid is being created, and maybe parameterize that. But I can understand if you can't pull that off right now.

[adumesny]

@RdeWilde comments:

| Or you have to divide items into different drop targets. 33% left is insert left, 33% right is insert right, other 34% is nest inside.

wouldn't work as you drag over the first 1/3rd, the item would be pushed out of the way and you couldn't get to the mid point to insert nested instead (would be weird to bring item underneath again if you continue moving over nothing to insert)

| Or you can have an icon inside the div to start dragging for nesting. Stripo has such labels in their editor

as a lib I can't insert any affordances (I don't even enforce the type of DOM element just added classes) BUT you sure could and switch mode (insert vs move) for them. I think I will add that as a mode and have Alt key by default switch mode, but you could add UI to control which mode you're in.

| Or show a context menu/popup on drop about what action to take

again, lib can't have UI and you can't do after the fact as the feedback would be move or insert but not both...

3. & 4. I think I will require items that can be subgrid to be set ahead of time because I need to know the column count/cellHeight, which may need to be different from the parent.

[RdeWilde]

Sounds good to me @adumesny

[arcavid]

1. do you expect "regular item" (green) to move "nested 1" out of the way and also being able to be dropped it inside (becoming a pink item) ? if so we can't have both without an explicit Alt key press or something... which is somewhat hidden, but I don't think we can differentiate using just gesture.

No Alt key, no moving "nested 1" out of the way. I just need dropping in (which works now)

2. dragging pink item "0" to parent yellow grid doesn't need special key (gesture explicit of dragging out, then will be be parented by yellow and push items, unless Alt key... BUT that doesn't work work moving pink between subgrids as it would leave and go to parent first). this is why this is tricky...

I need to drag an item out of a subgrid into a parent grid, and vice-versa.

3. can "regular item" be turned into a nested grid (drag another item into it, with Alt key) and would you need to say ahead of time what items can become nested grid and which ones cannot ? see 4

It would be an awesome feature, but I personally don't need this right now, considering how difficult it would be to implement.

4. in the demo nested 1 & 2 have 6 columns layout (parent 12) - if we automatically convert any item into a grid, what column count would we use (set it per item config ?)

No need to convert an item into a nested grid for now.

5. if I drag item0 over item1 with Alt key to drop into, do I convert item1 into subgrid of how many columns ? since item0 is same size (or could be bigger) it would take entire item1 columns - not clear what's expected here.

Same as my answer to Q4.

@adumesny