angular / angular/components

Support drag and drop to tree elements.

未关闭
#13,796 12 条评论 38 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/drag-drop area: docs P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### 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?

贡献指南

打开贡献指南

调研方向

首先,结合复现步骤中描述的 mat-table 和 mat-tree 用法,检查 Angular CDK cdkDropList 和 cdkDrag 的行为。阅读 issue #13100 了解相关讨论,然后分别处理所请求的树子节点拖放、源容器复制行为以及 preview/placeholder 行为;当预期的交互已得到明确说明并受到支持时,即视为完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
需要澄清
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。