bug(drag-drop): Draggable elements inside SVG DropList not spawning underneath cursor
- 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
Use StackBlitz to reproduce your issue:
- Components: https://stackblitz.com/fork/components-issue
- Harnesses: https://stackblitz.com/fork/harness-issue
Steps to reproduce:
1. Go to either https://stackblitz.com/edit/angular-droplist-with-previewcontainer?file=src/app/app.component.html
or https://stackblitz.com/edit/angular-droplist-without-previewcontainer?file=src/app/app.component.html
2. Drag the "Test" element to the other droplist
3. Release LMB
#### Expected Behavior
In both cases I would expect the "Preview" element to spawn next to the mouse cursor and to be dropped on the droplist under the cursor.
#### Actual Behavior
In the first example "with-previewcontainer" I use the `cdkPreviewContainer` attribute to spawn the "Preview" element inside the parent svg, in that case it spawns correctly, but the drop is offset. By moving the mouse cursor somewhere towards the bottom right of the page, the "Test" element can be seen moving to the other droplist.
In the second example "without-previewcontainer" the `cdkPreviewContainer` is omitted and the "Preview" element spawn at the top left of the page. The offset from the top left seems to correlate with the offset of the mouse cursor inside the droplist. Moving the mosue cursor far enough down and to the right will again make the "Test" element move to the other droplist.
The behaviour in Firefox seems to be slightly different.
#### Environment
- Angular: 12.2.6
- CDK/Material: 12.2.5
- Browser(s): Edge 93.0.961.52, Chrome 93.0.4577.82, Brave 1.29.81, Firefox 92.0.1
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách chạy hai bản tái hiện StackBlitz được liên kết và kiểm tra src/app/app.component.html, so sánh các trường hợp cdkPreviewContainer và omitted-container. Được xem là hoàn thành khi bản xem trước xuất hiện cạnh con trỏ và phần tử được thả vào danh sách thả xuống bên dưới con trỏ trong cả hai ví dụ SVG, bao gồm cả hành vi trình duyệt đã mô tả.
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
- 42/100