using drag and drop to create nested Grids #1009

alessandronogueiraporto · 2019-09-02T15:01:25Z

Nest items within items with drag and drop.

How can I nest items within items using drag and drop.

Your environment

Last of gridstack.js
Chrome, Firefox and Edge

Steps to reproduce

I need to drag menu items (grid-stack-item-content) into item (grid-stack-item-content), nesting parent and child items. The example is in:
https://github.com/AlessandroNogueiraPorto/gridstack

Expected behaviour

Group child items within parent items using drag and drop.

Actual behaviour

Items are currently draggable but not grouped within another item.
I need to build a process diagram with gridstack by including items within other items.

adumesny · 2019-11-18T07:17:16Z

related to #992

adumesny · 2019-12-21T02:13:48Z

maybe a ctrl/alt key could signal wanting to drop over vs moving item out of the way. Would be cool feature....

s0-david · 2021-12-30T02:42:08Z

Hi @adumesny, now that we have a sub grid accepting an item from its parent grid, I want to create a sub grid by dragging an item from a parent grid and hovering it on top of another item, then dropping it on top it.

Regarding the method to distinguish between an item just pushing another one and creating a sub grid (folder)... would perfectly overlapping an item on top of another one work? Dragging item will push an item when it overlaps less 90% for example, but if the dragging item is hovered on the other one like a solar eclipse and kept it for like a few seconds, then it creates a sub grid containing the other item. It's basically how iphone home operates (refer to the youtube video below).

I am open to and eager to keep things simpler for the sake of clean UI and code, but I cannot afford to demand users to press an extra key for an UI to do this feature or determine how items to react to user's interaction.

https://youtu.be/lS4TtjOTmR0?t=33

sr_7o2LMf2G.mp4

Thanks!

adumesny · 2021-12-30T02:50:35Z

The iphone desktop is clearly a great design, but is solving a different and limited problem

all items are the same size (1x1 square) which make it trivial (push) while GridStack (GS) supports any shapes so the collision is very different
because of 1 there is also a top-left flow when items are inserted it just reflows the other ones into 1 list that wraps. Note this feature has been asked before. (in addition to float:true|false) have a list reflow mode.
you insert an item by picking the in between space, while GS requires you to have >50% over an edge to push/swap an item out of the way. Iphone does that because 90% over means nest/group so you need to tell them apart.
when grouped/nested, iphone has smaller items so parent is still 1x1 - not something native to GS so behavior might not work the same.... if you hover the item long enough, we would need to create a nested grid, and position you item there, push the other to the right/below) and hopefully the sub-grid CSS would look different enough to let user know they are grouped and can be moved as such (if clicking on parent)
in order to support dynamically creating sub-grids, I need to know what column count to use. I think adding a column='auto' to match the parent width count is the only thing that would work (then items stay pretty much the same size when nested). <-- that could be added to what we have today
in the GS case we still need to figure out to differentiate a push (50% of space) vs a nest (say 90-100% with delay), problem is the first always happens before the other, so....

One crazy idea would be to have an 'iphone desktop' mode that would replicate the above as much as possible, but that would be a big task...not sure how deep your pocket is.

s0-david · 2021-12-30T02:51:26Z

The iphone desktop is clearly a great design, but is solving a different and limited problem

all items are the same size (1x1 square) which make it trivial (push) while GridStack (GS) supports any shapes so the collision is very different

Would this simplify this issue?: only when colliding item's size matches the target item's to activate nesting option. Or even 1x1 to 1x1 case to be the only nesting case is okay.

because of 1 there is also a top-left flow when items are inserted it just reflows the other ones into 1 list that wraps. Note this feature has been asked before.

I need to put items with diverse sizes into an already created sub-grid but don't need to do the new collide-to-nest feature when 2x1 to 1x1 something like that. Maybe the sub-grid created by this new feature to have a size of 2x2 by default or any size that fits the inserted two items which are the dragging and the collided one.

you insert an item by picking the in between space, while GS requires you to have >50% over an edge to push/swap an item out of the way. Iphone does that because 90% over means nest/group so you need to tell them apart.

I think when a dragging item is placed on the exact top of another item covering it can tell the difference. When drag is stopped on top of an item but doesn't overlap quite fully, then it should just push it.

when grouped/nested, iphone has smaller items so parent is still 1x1 - not something native to GS so behavior might not work the same.... if you hover the item long enough, we would need to create a nested grid, and position you item there, push the other to the right/below) and hopefully the sub-grid CSS would look different enough to let user know they are grouped and can be moved as such (if clicking on parent)

I think sub-grid CSS should be up to library users, and the CSS should be applied to the sub-grid such as its background or border, not to the items in it. I am also no to the sub-grid staying 1x1 and opening up a modal, I didn't intend to mimic this. I'm satisfied with how GS shows a sub-grid showing its containing items explicitly.

in order to support dynamically creating sub-grids, I need to know what column count to use. I think adding a column='auto' to match the parent width count is the only thing that would work (then items stay pretty much the same size when nested). <-- that could be added to what we have today

I want to keep the size of an item in a sub-grid to be very similar or exactly the same as an item on the top-level grid. So change a sub-grid's column using .column() whenever the sub-grid gets resized.

in the GS case we still need to figure out to differentiate a push (50% of space) vs a nest (say 90-100% with delay), problem is the first always happens before the other, so....

Can this be resolved by my answer on Q1?

adumesny · 2021-12-30T03:12:45Z

| I think when a dragging item is placed on the exact top of another item covering it can tell the difference. When drag is stopped on top of an item but doesn't overlap quite fully, then it should just push it.

only problem is you already have pushed before you completely overlap UNLESS you need to pause to push (which is not ideal since pushing is likely a lot more common that create new nesting) OR have a very specific area to push that is small enough that if you pass it (on the way to overlap) you can restore it back so you can later overlap and nest...

Likely much harder to do with randomly shaped items of different sizes than phone 1x1 squares...

I need to think more about this and how that would affect everyone vs 4.x we have today....

| I want to keep the size of an item in a sub-grid to be very similar or exactly the same as an item on the top-level grid. So change a sub-grid's column using .column() whenever the sub-grid gets resized.

we're on the same page here and something that can be done now. I thought about it after I updated the nested.html example and thought about how we could keep all the children the same size...

s0-david · 2021-12-30T03:23:36Z

only problem is you already have pushed before you completely overlap UNLESS you need to pause to push (which is not ideal since pushing is likely a lot more common that create new nesting) OR have a very specific area to push that is small enough that if you pass it (on the way to overlap) you can restore it back so you can later overlap and nest...

How about we provide an option to enable this collide-to-nest feature, then a little pause to push is acceptable for those who want this feature. I believe dragging an item onto the in-between space is intuitive and won't be a bad UI when the nesting option is enabled.

v1talii-dev · 2022-06-07T14:33:41Z

What is required to finalize #1941 ? As far as I understand, having groups A and B (the same nesting level), dragging B to A can only be implemented by enabling a certain mode (via ctrl/alt). How much is it possible and labor-intensive? I'm ready to do it, please tell me where to start?

adumesny · 2022-09-20T18:19:03Z

starting work on this as Stephane P has generously sponsored this feature...

* partial fix for gridstack#1009 * Create sub-grids on the fly, by dragging items completely over others (nest) vs partially (push) using new flag `GridStackOptions.subGrid.createDynamic=true`. * ability to pause drag&drop collision until the user stops moving - see `DDDragOpt.pause` TODO: need to make it work on already nested grids, remove nested on drag out, more testing...

adumesny · 2022-09-24T23:12:16Z

first part done! using pause to differentiate between push and nesting... lot of work, more to do.

20220924_160517.mp4

* more partial fix for gridstack#1009 and gridstack#992 * you can now drag a nested grid over another one and nest it deeper (992) * fixed size transition * fixed handlers not set when nesting TODO: fix pause to work for enter/leave, more nested testing. Fix tests

adumesny · 2022-09-25T15:55:11Z

you can now drag sub-grids into sub-grids, creating unlimited nesting

20220925_085403.mp4

fix gridstack#1009 remaining issues * dragging out last item will nuke empty nested grid * dragging over item to create nested grid, will revert back to normal item if you continue to drag out * fixed CSS issues dragging nested in/out couple times

fix gridstack#1009 remaining issues * dragging out last item will nuke empty nested grid * dragging over item to create nested grid, will revert back to normal item if you continue to drag out * fixed CSS issues dragging nested in/out couple times TODO: fix test cases, doc, more testing

adumesny · 2022-09-26T02:57:12Z

more edges fixes - make sure to delete temporary nested grids or empty ones

20220925_195559.mp4

more for gridstack#1009 * fixed makeSubGrid() to migrate node content field as well (not just html dom) * save() now removes w,h of 1 * fixed dragging sub-grid over another, dragging content out not deleting empty sub-grid * fixed test cases

vszakd · 2024-01-05T10:25:53Z

Hello,
from what I can see the nesting behaviour revolves around the DDDragOpt.pause option. But this option introduces a global lag (the user needs to stop for a while to see the placeholder in the right place). Is there any way around that?

adumesny · 2024-01-05T17:42:20Z

@vszakd not without having a disctinc behavior of push vs merge into subgrid - see #1009 (comment)
this is not very different from phone widgets where you do have the pause briefly before 2 get grouped into a new folder...

adumesny added the type:enhancement label Nov 18, 2019

adumesny changed the title ~~Gridstack nested~~ using drag and drop to create nested Grids Dec 21, 2019

adumesny mentioned this issue Dec 21, 2019

acceptWidgets option does not work when setting grid stack item droppable #948

Closed

adumesny mentioned this issue Dec 5, 2020

Issue when drag and drop from nested grid #1282

Closed

adumesny mentioned this issue Dec 30, 2021

nested grid column:'auto' option #1910

Merged

3 tasks

adumesny closed this as completed in 83e11d2 Dec 30, 2021

adumesny reopened this Dec 30, 2021

adumesny mentioned this issue Mar 10, 2022

Nested Grid Only Works for 1 Level. Need it work till nth level. #1941

Closed

adumesny pinned this issue Sep 23, 2022

adumesny mentioned this issue Sep 24, 2022

using drag and drop to create nested Grids - part1 #2050

Merged

3 tasks

adumesny mentioned this issue Sep 25, 2022

can drag nested grid over nested grid - Part 2 #2052

Merged

3 tasks

adumesny mentioned this issue Sep 26, 2022

using drag and drop to create nested Grids #2053

Merged

3 tasks

adumesny closed this as completed in #2053 Sep 26, 2022

adumesny mentioned this issue Sep 26, 2022

Dragging widget into parent grid and nested child grid #992

Closed

adumesny self-assigned this Sep 26, 2022

adumesny mentioned this issue Oct 9, 2022

more nested grid fixes #2066

Merged

3 tasks

adumesny unpinned this issue Apr 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

using drag and drop to create nested Grids #1009

using drag and drop to create nested Grids #1009

alessandronogueiraporto commented Sep 2, 2019

adumesny commented Nov 18, 2019

adumesny commented Dec 21, 2019

s0-david commented Dec 30, 2021 •

edited

Loading

adumesny commented Dec 30, 2021 •

edited

Loading

s0-david commented Dec 30, 2021 •

edited by adumesny

Loading

adumesny commented Dec 30, 2021 •

edited

Loading

s0-david commented Dec 30, 2021 •

edited

Loading

v1talii-dev commented Jun 7, 2022

adumesny commented Sep 20, 2022

adumesny commented Sep 24, 2022

adumesny commented Sep 25, 2022

adumesny commented Sep 26, 2022

vszakd commented Jan 5, 2024

adumesny commented Jan 5, 2024

using drag and drop to create nested Grids #1009

using drag and drop to create nested Grids #1009

Comments

alessandronogueiraporto commented Sep 2, 2019

Nest items within items with drag and drop.

Your environment

Steps to reproduce

Expected behaviour

Actual behaviour

adumesny commented Nov 18, 2019

adumesny commented Dec 21, 2019

s0-david commented Dec 30, 2021 • edited Loading

adumesny commented Dec 30, 2021 • edited Loading

s0-david commented Dec 30, 2021 • edited by adumesny Loading

adumesny commented Dec 30, 2021 • edited Loading

s0-david commented Dec 30, 2021 • edited Loading

v1talii-dev commented Jun 7, 2022

adumesny commented Sep 20, 2022

adumesny commented Sep 24, 2022

adumesny commented Sep 25, 2022

adumesny commented Sep 26, 2022

vszakd commented Jan 5, 2024

adumesny commented Jan 5, 2024

s0-david commented Dec 30, 2021 •

edited

Loading

adumesny commented Dec 30, 2021 •

edited

Loading

s0-david commented Dec 30, 2021 •

edited by adumesny

Loading

adumesny commented Dec 30, 2021 •

edited

Loading

s0-david commented Dec 30, 2021 •

edited

Loading