Add CDK drag and Drop Support

[godind]

Hi. Love Angular Split!!!

I would like to have CDK Drag and Drop support built so you can sort within a split-area and and drag & drop between as-split.
See: https://material.angular.io/cdk/drag-drop/overview

This is a concept: https://stackblitz.com/edit/angular-split-cdk-dragandrop-test-kzqpgh?file=src%2Fapp%2Fapp.component.html

Thank you

[Harpush]

As currently DOM order doesn't affect areas order you can create an orders array (bound to order input in split area) and shuffle it as a result of drag and drop.
That is if I understand you correctly

[godind]

@Harpush as-split-area has an order that defines the order in which as-split renders areas, right? It would be nice if CDK drag & drop was implemented out of the box to be able to visually re-order areas within the split.

Same goes for moving areas from split to split.

It would be a nice UX. In my app I need to give those flexibility and and I've seen a few requests on the internet about this for Angular split.

Am I making sense? Or maybe I'm missing something.

[Harpush]

With the upcoming refactor the areas order will be determined by DOM position. That means that drag and drop should work as you don't need order anymore.
Only caveat is clearing old context... Not sure how it would behave.

[godind]

@Harpush do you know when the next release is planned?

[godind]

With the upcoming refactor the areas order will be determined by DOM position. That means that drag and drop should work as you don't need order anymore.

Only caveat is clearing old context... Not sure how it would behave.

To sort areas and move between splits it needs a few sorting list connections properties, sort order properties, plus some Drag visual style template definitions.

It does not appear to be much work (have not deep dived yet and new to those) and it would be a great if it was a built-in supported feature to what Split already offers.

[Harpush]

@godind beta is out - you can check if it works for you

[godind]

@Harpush I'll give it a shoot next week. Any chance you can share some draft upgrade/change doc to guide how to use it now?

[godind]

@Harpush updated and with a few changes, basic operations (split horizontal and vertical, resize, delete split and split-area) work well. I've not played with styles yet. Great work!

How would I go about implementing Drag & Drop with the grid layout? Each split would be cdkDropList and each child area a cdkDrag. Can you put splits next to each other or do other splits need to be inside areas? That will create cdkDropList inside cdkDropList.

I need users to split as they wish creating rows and columns that changes direction.

Thanks

[Harpush]

@Harpush updated and with a few changes, basic operations (split horizontal and vertical, resize, delete split and split-area) work well. I've not played with styles yet. Great work!

How would I go about implementing Drag & Drop with the grid layout? Each split would be cdkDropList and each child area a cdkDrag. Can you put splits next to each other or do other splits need to be inside areas? That will create cdkDropList inside cdkDropList.

I need users to split as they wish creating rows and columns that changes direction.

Thanks

Not entirely sure what you are trying to accomplish but let me say this:

1. The split is best for 1d splitting (rows or columns)
2. If you wish to have two splits and allow drag and drop between them - I think that's doable with two cdk drag lists
3. If you want a grid layout (rows and columns, with drag and drop to swap areas and also expand collapse areas) I don't think this is the correct library for it as it is meant to split views in 1d as I said.

An example of what you are trying to achieve might make it easier to answer you if this library is meant for it

[godind]

Let me know if this helps. As you said, I might need another library...

Below is my app. It's a fullscreen sailing instrument dashboard built with angular-split. You can add as many dashboard pages as you like. Each dashboard page starts with a single horizontal split and one child area. Each area contains a single gauge. Users can edit the layout and add, delete areas and resize.

Users can also, from within this original horizontal split, add an area that will contains a child split with vertical layout. In this vertical split, they can add areas that will stack in the other direction. This can go on and on to arrange as they wish. It works well.

I'm trying to add Drag & Drop to allow for:

1. Area sorting within a split
2. Area movement between splits

Like I mentioned, with v17, I tried making splits drag lists and areas draggable. Sorting works fine, but moving areas from split to split is not working well because a split can contain an area with a split inside to change layout direction. This creates child split drop lists inside the parent split drop lists.

Do you think is possible to achieve this with this library?

[Harpush]

I think this use case is more for a grid layout library.

Anyway concerning drag and drop - usually you need place to drop at and here I am not sure I understand how you wish for drop to act (add a new area? Push? Swap? Minimize other areas?)

It can be accomplished I believe with angular-split but it won't be easy and requires dynamic recursive splits.

[godind]

Excellent feed-back. You can close.

Thanks for the great support!