angular / angular/components

Support drag and drop to tree elements.

Đang mở
#13,796 12 bình luận 38 reaction 0 người được giao Xem trên GitHub
area: cdk/drag-drop area: docs P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách xem xét hành vi của Angular CDK cdkDropList và cdkDrag cùng với cách sử dụng mat-table và mat-tree được mô tả trong các bước tái hiện. Đọc issue #13100 để xem cuộc thảo luận liên quan, sau đó tách riêng các thao tác drop vào node con của tree được yêu cầu, hành vi sao chép của container nguồn và hành vi của preview/placeholder; được xem là hoàn tất khi các tương tác dự kiến đã được đặc tả và được hỗ trợ.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.