Gridster is awesome but ...

[andreElrico]

This is not really an issue:

Gridster is awesome but ... (incredible UX, the best I know on the web for grids)

... its missing:

• dragging between multiple gridsters
• nesting gridsters
• multiselect for multi dragging

I've read here a couple of times from the author that the current design will make such features difficult.

• Could someone comment on that?
• How can we help?
• Do we have to make angular-gridster3 ? :laughing:

[tiberiuzuld]

Hi @andreElrico , Yes you are correct about missing features. Expect nesting gridsters kinda work without doing anything special in the library. Of course drag between them because of the missing feature drag between grids. Regarding dragging to a separate grid it kinda works if the dev integrating the library writes some more code to accommodate for it. Using the library option enableEmptyCellDrop which uses native HTML5 drag&drop, it is possible to write code to move items from one grid to another. https://tiberiuzuld.github.io/angular-gridster2/emptyCell

My initial idea some long time ago was to rewrite most of the library to use native HTML5 drag&drop for dragging and to make drag between grids more easy and just another option to enable.

Also a bit more work to completely change how the grid options work and how you give the items, so instead of having a ngFor* made by the user of the library to give the items directly to the options object and each item to have a component to render. More similar to how ag-grid does it. This has the downside of not using native angular Inputs&Outputs for each item.

Also a more long term after that was to make the library more agnostic to be possible to use it as a pure javascript library and make wrappers for each framework. :) since I think it shouldn't be difficult to separate angular from it and use native API to change DOM elements.

Unfortunately was occupied by other projects and commitments, and didn't got around to do it and a long time has passed. In the near feature (this year) don't think I can either, my best guess is start of next year.

If someone or you want to implement this features or maintain the project I am happy to give access or review any PR.

Thank you for your interest in this project :)

[andreElrico]

@tiberiuzuld thank you for the time writing such a nice reponse.

• I have started to create a grid, based on CDK-Tree.

  1. its very angular framework semantic.
  2. possibly the most performant way.
  3. as such a grid - library is possibly one of the most complicated things to do Im not very far.

• My idea is to use sortablejs for dnd.

  1. they have 20k stars
  2. they have multi-select, drag-between containers, nesting, ... etc already on board

• sortablejs have "plugins" Sortable.mount(new MultiDrag(), new Swap()); (from docs)

• here is something ive created quickly with sortablejs STACKBLITZ

  1. this however this currently only works with "normal gridflow" stackblitz

• It would be cool if its possible to create own sortablejs plugins (to implement the pushing and swapping in the gridster2 logic)

[andreElrico]

Another thing I was thinking:

gridster2 seems to use transform: translate3d;

I was thinking of using actual grid-row-start/end grid-column-start/end and then get the animations with

https://github.com/aholachek/animate-css-grid

library. I assume grid-animations/transtions will one day come to the browser. Firefox has them experimental already. So that lib would be a "polyfill".

[tiberiuzuld]

animate-css-grid looks nice :) There was a working version with CSS Grid a few years ago, that I tried, it was working nice, but sadly no animations and reverted it to transform or left/top Yes in the grid you can choose between transform3d or left/top positioning option.useTransformPositioning

Sortable looks nice but it does not seem to let you leave gaps in between items or place them where you want, at least from what I saw.