Support drag and drop to tree elements.

[TKul6]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Currently the d&d behavior allows to drag items from 1 cdkDropList to another cdkDropList

In my case I need to copy (by drag & drop) item (row) from a table to a tree.

I tried to use the cdk but handle a few problem.

What is the current behavior?

1. (This is a major problem) - I can't seem to work with cdkDropList inside a tree, since it has an hierarchical structure , the item is always dropped in the root node, How can I drop the item into a child node??? There is also a problem with the cdkDropListConnectedTo since I don't want to give the id's of each node in the tree.

2. There is no source container - I put a cdkDropList directive in my table element (which I drag items from) and it gave me the ability to drag rows from the table to the tree, as oppose to drag the rows freely on the screen. This is great. However, it gave me a behavior that I don't wan't, re order items inside the table: When I drag over the table, the items move, but since it just a source container to copy items from they really need to be fixed, And it will be great if there was a way to fix the dragged item itself (Apply copy behavior using the preview image instead of a move behavior).

Update I think issue #13100 discuss this feature in depth.

3. ( more of a proposal) - In my *cdkDragPreview I render a label with all the information I need, so when I try to drop the item, There is the preview as well as the placeHolder image, I think it would be great to allow displaying only one of the two).

What are the steps to reproduce?

• Add a table with cdkDropList
• Add to the table some rows with cdkDrag
• Add at tree element (for each node apply the cdkDropList directive).
• try to drag element from the table and drop it into a child drop list.

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

As I said, I need to copy items from a mat-table to mat-tree

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

Angular CLI: 7.0.2 Node: 9.0.0 OS: win32 x64 Angular: 7.0.0 ... compiler, core

Package Version

@angular-devkit/architect 0.10.2 @angular-devkit/core 7.0.2 @angular-devkit/schematics 7.0.2 @angular/cli 7.0.2 @schematics/angular 7.0.2 @schematics/update 0.10.2 rxjs 6.3.3 typescript 3.1.3 material 7.0.1

Is there anything else we should know?

[jimitndiaye]

It would be great if cdkDropList could be nested. That should resolve this while catering for more general use of nested lists. A potential solution would be to have the cdkDropList provide itself as an injection token to child components allowing them to cancel dragOver operations on the parent once the dragged item enters a nested cdkDropList so it can take over:

import {InjectionToken} from '@angular/core';

/**
 * Injection token that can be used for a `CdkDropList` to provide itself as a parent to the
 * drop-specific child directive. Used primarily
 * to avoid circular imports.
 * @docs-private
 */
export const CDK_DROP_PARENT = new InjectionToken<{ stopDragOver: () => void }>('CDK_DROP_PARENT');

The function stopDragOver would be use by the child list to indicate to the parent that it is taking over the drag operation.

[leoclc]

Any updates on this? I will start developing my own solution

[vadjs]

That's terrible that current implementation have no dragging item in drag and drop event. That's the single real problem that makes working with trees hard.

The cdkDropListDropped event never shows real value in previousIndex when interacts with tree.

[VVKot]

@josephperrott @crisbeto Hey, guys! Can you tell if supporting D&D for MatTree is in your backlog and if so - what priority does it have?

[crisbeto]

It should be possible now with the API added in https://github.com/angular/material2/pull/14437.

[leoclc]

It should be possible now with the API added in #14437.

I am using dragula atm but I would like to migrate to cdk

can you give me a hint how to stop triggering the sort event in a parent container?

[VVKot]

@crisbeto I meant the out-of-the-box D&D for the MatTree, is it going to happen?

[sunith-kumar]

I have a similar requirement where I want to drag the list and drop inside the tree node. Please visit the link for image https://i.imgur.com/dZnL2bQ.png

[Xen3r0]

No features plan for dnd support in tree ?

[dmntswntrs]

I'm extremely interested in this. Is this just not possible at all with the current CDK implementation of drag-drop and the current Material implementation of mat-tree?

[rdamazio]

For anyone interested - I managed to hack my way to get a similar effect in my project: https://github.com/rdamazio/efis-editor/issues/57 (TLDR: I subclassed CdkDrag so I can manually attach to drop lists across ng-container, I made the placeholder height be zero, I mess with the sortability of the list on drag enter so items don't get shifted around, and I manually determine which item it was dropped on from the MouseEvent) - but it'd still be awesome to get "proper" support for this, especially if the same drop list inside a tree can receive both "same-type" items which do go inbetween other items, as well as items that go into an item.

[ggros-septeo]

Hello every one,

I would be really interested in an elegant solution on how to implement drag and drop within a mat-tree component with Drag and Drop CDK from material Angular ?

Currently I've implemented something similar to what I've found in this repo => https://github.com/alerubis/angular-draggable-mat-tree i t uses "native" HTML drag and drop feature