Dragging widget into parent grid and nested child grid #992

ygalanter · 2019-04-23T19:57:43Z

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 · 2019-07-18T08:07:14Z

@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 · 2019-07-23T08:08:14Z

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 · 2019-12-22T01:48:54Z

#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 · 2021-05-26T15:07:18Z

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

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.
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...
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
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 ?)
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 · 2021-05-28T07:49:31Z

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

I don't get it, but i do understand it is not easy. Maybe check how other ui's handle this?
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.
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.
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 · 2021-05-28T14:55:56Z

@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...

& 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 · 2021-05-31T07:22:13Z

Sounds good to me @adumesny

arclogos132 · 2021-12-22T02:22:05Z

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)

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.

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.

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.

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

arclogos132 · 2021-12-22T02:25:38Z

https://github.com/gridstack/gridstack.js/blob/master/demo/nested.html#L50

acceptWidgets: '.grid-stack-item.sub', // only pink sub items can be inserted, otherwise grid-items causes all sort of issues

This is where I am stuck. I need to set acceptWidgets: '.grid-stack-item' (or true) to the subGrid and its parent grid.
If I have this on both grids, I can drag an item out of the sub grid into its parent grid, but cannot put it back in, because the sub grid will move around dodging my dragging item.

arclogos132 · 2021-12-22T02:44:44Z

r.mov

Video of not being able to put an item back into a sub grid, while dragging it out of the sub grid into its parent grid works fine.

* fix to make gridstack#992 better going forward as I'm focusing on nested grids again * dragging sub item between grids no longer get clipped by parent * removed basePosition.aboslute option as I'm not sure how we can make it work (parent has position.relative which will clip us otherwise) * nested.html you can drag pink items between grids (h5 case, JQ still clipps)

adumesny · 2021-12-27T05:54:44Z

got most of it working for upcoming release... thanks to @arclogos132 for actually funding this!

20211226_212858.mp4

arclogos132 · 2021-12-27T06:12:09Z

That looks beautiful

@arclogos132

* fix gridstack#992 * we now support dragging into and out of nested grids from parents * nested.html was updated to showcase this, settings all grids to accept the same widgets. using CSS to differentiate nested items vs not for styling/demo purpose only. * tested nested, float nad two.html - all seem to continue working (this was a lot of work to fine tune) * also fix gridstack#1558 as we no longer cache the grid position (as we may move when items are placed elsewhere) but get it on every move to reflect latest data Thank you [@arclogos132](https://github.com/arclogos132) for sponsoring it.

adumesny · 2021-12-29T17:27:46Z

some issue remain (nested within nested break things) - re-opening

20211229_092538.mp4

adumesny · 2021-12-30T06:14:28Z

fixed

20211229_221207.mp4

* remaining fix for gridstack#992 to prevent a nested grid from going inside another until we can do the right thing down the line. Very broken otherwise * also fixed heuristics to work like regular items (ignore enter/leave for sub grid dragging)

* 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-26T14:15:15Z

got the nested drag (which was disabled) fixed as part of #1009 (changelist #2052) for v7

20220926_070947.mp4

but the mouseenter event is used today to add items to a grid, when it should really be 50% coverage like between items - so you can't really push vs nest between sub-grid (depending on where your cursor is) - that will have to be future tweaks

adumesny mentioned this issue Nov 18, 2019

using drag and drop to create nested Grids #1009

Closed

adumesny added the type:enhancement label Dec 21, 2019

adumesny mentioned this issue Sep 18, 2020

Dragging from parent grid to child and vice versa doesn't work #1364

Closed

adumesny changed the title ~~Dragging widget from one grid into another, nested one~~ Dragging widget into parent grid or nested child grid Dec 5, 2020

adumesny changed the title ~~Dragging widget into parent grid or nested child grid~~ Dragging widget into parent grid and nested child grid Dec 5, 2020

adumesny mentioned this issue Dec 5, 2020

Issue when drag and drop from nested grid #1282

Closed

adumesny mentioned this issue Jul 6, 2021

How to do multi level nesting in gridstack js #1803

Closed

adumesny mentioned this issue Dec 23, 2021

dragging nested items no longer clipp #1902

Merged

3 tasks

adumesny mentioned this issue Dec 29, 2021

nested grid in/out drag from parent support #1908

Merged

3 tasks

adumesny closed this as completed in #1908 Dec 29, 2021

adumesny reopened this Dec 29, 2021

adumesny mentioned this issue Dec 30, 2021

prevent double nesting using gesture #1909

Merged

3 tasks

adumesny closed this as completed Dec 30, 2021

adumesny mentioned this issue Sep 25, 2022

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

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dragging widget into parent grid and nested child grid #992

Dragging widget into parent grid and nested child grid #992

ygalanter commented Apr 23, 2019

DamonMuscle commented Jul 18, 2019

Altraya commented Jul 23, 2019 •

edited

adumesny commented Dec 22, 2019 •

edited

adumesny commented May 26, 2021 •

edited

RdeWilde commented May 28, 2021 •

edited

adumesny commented May 28, 2021 •

edited

RdeWilde commented May 31, 2021

arclogos132 commented Dec 22, 2021 •

edited

arclogos132 commented Dec 22, 2021 •

edited

arclogos132 commented Dec 22, 2021

adumesny commented Dec 27, 2021 •

edited

arclogos132 commented Dec 27, 2021

adumesny commented Dec 29, 2021

adumesny commented Dec 30, 2021 •

edited

adumesny commented Sep 26, 2022

Dragging widget into parent grid and nested child grid #992

Dragging widget into parent grid and nested child grid #992

Comments

ygalanter commented Apr 23, 2019

DamonMuscle commented Jul 18, 2019

Altraya commented Jul 23, 2019 • edited

adumesny commented Dec 22, 2019 • edited

adumesny commented May 26, 2021 • edited

RdeWilde commented May 28, 2021 • edited

adumesny commented May 28, 2021 • edited

RdeWilde commented May 31, 2021

arclogos132 commented Dec 22, 2021 • edited

arclogos132 commented Dec 22, 2021 • edited

arclogos132 commented Dec 22, 2021

adumesny commented Dec 27, 2021 • edited

arclogos132 commented Dec 27, 2021

adumesny commented Dec 29, 2021

adumesny commented Dec 30, 2021 • edited

adumesny commented Sep 26, 2022

Altraya commented Jul 23, 2019 •

edited

adumesny commented Dec 22, 2019 •

edited

adumesny commented May 26, 2021 •

edited

RdeWilde commented May 28, 2021 •

edited

adumesny commented May 28, 2021 •

edited

arclogos132 commented Dec 22, 2021 •

edited

arclogos132 commented Dec 22, 2021 •

edited

adumesny commented Dec 27, 2021 •

edited

adumesny commented Dec 30, 2021 •

edited