drag-drop: Dropping into nested ChildList

[ked1]

Bug, feature request, or proposal:

Bug, Feature depending on the expectation, which isn't totally clear in this case.

I would tend to say, it is a bug, because my use case seams to be quite common.

What is the expected behavior?

It should be possible to drag and drop from a parent list into a nested child list.

What is the current behavior?

No placeholder is displayed in the child list and the received container in the drop event method is always the parent list. The placeholder moves only in the parent list, which is consistent to the described drop event data.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-dragdrop-from-parent-to-nested-childlist
Drag parent item into the subitem list.

(From subitem list to parent list works correctly)

What is the use-case or motivation for changing an existing behavior?

We have a component to configure menu structure by drag and drop. It should be possible to move menu items to a sub menu.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cdk 7.0.3

Is there anything else we should know?

In our use-case we have only one element with a child list, which could be possible to solve with the current implementation assuming it is a bug. I'm struggling by the imagination with multiple child lists according to the concept with template variables.

[johannesheucher]

@jelbourn @crisbeto
Hey guys, I have a similar use case and it would be great, if you'd have some hints for us to work around this problem.

(similar issue here #13242)

[ked1]

Did someone find a workaround for this?
For us It would be great to finally integrate our feature branch which introdurces the CDK to our app. But this issue is a show stopper at the moment.

[michaelbromley]

I've also run into this when working on a drag-drop category tree editor component with @angular/cdk@7.1.0

As you can see in this video, it is possible to drag into a nested list, but it is just exceedingly difficult. There's probably a 1-pixel window which you must land on in order for it to work.

I've not looked at the implementation, but visually it looks like the lower cdkDrag will switch position as soon as the cdkDragPlaceholder crosses its top boundary. Perhaps allowing the reordering to occur after <x pixels/percent> overlap of that item might make it possible to ergonomically drag into a nested list?

[ked1]

I just recognized, that my stackblitz has an issue. The parentList is connected to non-existing childList property. But still I'm not sure how to fix it and if it would work.

@michaelbromley : thanks for your input. Could you provide your sample on stackblitz?

[michaelbromley]

@ked1 Sure, here you go: https://stackblitz.com/edit/material2-14093

[FritzHerbers]

Noticed the merged #14257 into master/7.2.0.
The above stackblitz examples look better. Moving items into other child's still shows issues.

[MarkPieszak]

7.2.0 seems to get make everything a bit less jittery (if you update @michaelbromley stackblitz for example), but now child/nested items aren't able to become parent/top level items, and now completely unable to become part of another nested/child group.

[FritzHerbers]

@MarkPieszak
Tried to identify the problem with the above example, but couldn't find it.

The example generates nested cdkDropListGroup. This might only work for the DropList's in the group not transfering to one List from another Group. Deleted the cdkDropListGroup in app-product-category-tree and made one in app.html, still didn't work.

[cdkDropListEnterPredicate] does not show any events in @7.2.0.

With @7.2.0 in my application (WYSIWIG ngx-formly based form designer) where I use nested childs to group form fields and for horizontal layouting I can move and transfer between all lists.

Still jitter exists, when setting up cdkDropListEnterPredicate and moving over a parent and child many calls are made. Here material should only take the child into account.

[FritzHerbers]

I adapted @michaelbromley example https://stackblitz.com/edit/material2-14093-qwaobp to use a drag registration service.

Removed cdkDropListGroup in product-category-tree.
Each tree-node wraps a CdkDropList, with AfterContentInit it registers to the drag registration service.
In the html [cdkDropListConnectedTo]="dropListConnectedTo" is used for allowed list to drag into, the method returns all registered CdkDropList.

Now items can be transferred, although it needs some mouse moving to accomplish a transfer.

There is still a lot of jitter, as the CDK enables all CdkDropList under the mouse, instead of only offering the deepest (highest z-index) child.

I think, transfers are failing because of the size of draggable and the destination. Therefor moving to the deepest child is not possible.

In my own application, I don't have problems transferring to the first/last position, in this example I have problems, especially to the first position.

tested with cdk@7.3.1

Hoping to get some feedback and pin-pointing the remaining problems for fixing.

For background information: I use an adapted registration service, to register different ListGroups (e.g. main and template), where I allow to copy from template to main, but not the other way around and allowing to transfer/move in main and template themself.

[volser]

Any news here?

[djcurfew]

We are willing to offer a bounty if anyone can get this done, $500 to do it.

[BradleyHarper]

We are willing to offer a bounty if anyone can get this done, $500 to do it.

Challenge accepted

[Kayes-Islam]

We need exactly this so that we can drag items in and out of grouped list in our app. Looking forward for a solution.