CDK Drag Drop issues with nested lists
- 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ả
#### Reproduction
https://stackblitz.com/edit/angular-drag-and-drop-child-groups-fxzjja?file=app%2Fcdk-drag-drop-connected-sorting-group-example.html
Steps to reproduce:
1. Try to drag element "Brush teeth" to before "Drive to office" or before "Walk dog"
2. this will not be possible
#### Expected Behavior
Drag / Drop to all lists contained in cdkDropListConnectedTo
#### Actual Behavior
Items from inner Lists may only be dropped to outer lists, not to sibling or their own lists
#### Environment
- Angular: 8.1.2
- CDK/Material: 8.1.2
- Browser(s): Firefox / Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Debian Linux, Windows
#### Additional Info
When using CDK drag / drop (8.0.0 up to and including 8.1.2) with nested
lists, two issues arise that prevent an easy use of the feature:
a) dragging does not work from inner list to inner list
- See
https://stackblitz.com/edit/angular-drag-and-drop-child-groups-fxzjja?file=app%2Fcdk-drag-drop-connected-sorting-group-example.html
- When dragging an inner item (e.g. Brush teeth) it is only possible to
drop it in the outer list, not in its own list and not in its sibling list.
- It turns out, that order in cdkDropListConnectedTo is important: when
I reverse the items, it will partially work: See
https://stackblitz.com/edit/angular-drag-and-drop-child-groups-mxrkae?file=app%2Fcdk-drag-drop-connected-sorting-group-example.html
- Still, it is not possible to drop an item from an inner list in into
its own list
b) dragging does not work in the drop item's source list
- See above
- You may find a hack for this in
https://stackblitz.com/edit/angular-drag-and-drop-child-groups-35em6n?file=app/cdk-drag-drop-connected-sorting-group-example.html
Explanation and proposed solution.
For above case a) mentioning it in the documentation may be sufficient -
it can be influenced from the outside. However, a more intelligent
solution (e.g. identifying the toplevel sublist) would be nice.
For case b), filtering out the source list in
src/cdk/drag-drop/directives/drop-list.ts seems to cause the issue:
ref.connectedTo(siblings.filter(drop => drop && drop !==
this).map(list => list._dropListRef))
My hack replaces this by an unfiltered list - in quite an ugly manner.
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với các bản tái hiện StackBlitz được liên kết để xác nhận hành vi của danh sách lồng nhau. Đọc src/cdk/drag-drop/directives/drop-list.ts, đặc biệt là phần thiết lập các danh sách được kết nối được mô tả trong issue, và tìm các bài kiểm thử drag-drop liên quan. Hoàn tất khi các mục từ những danh sách bên trong có thể được thả vào chính danh sách của chúng, các danh sách cùng cấp và các danh sách được kết nối bên ngoài, bao gồm cả danh sách nguồn.
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
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100