angular / angular/components

bug(cdk/drag-drop): Wrong direction of drop placeholder when moving between two different horizontal drop lists

Đang mở
#28,917 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/drag-drop P4
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ả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Video: https://github.com/angular/components/assets/75433150/224b9a5c-cb45-44d4-8a94-04cae935fe65

As per the attached video and reproducible in the stackblitz, when you drag from one horizontal drop list to another, the direction reverses. For example, if you drag from a first row to a second row starting from the right and moving down to the left, once you get to the second row, the drop placeholder will show up on the right regardless of where the cursor was when you entered the second row. From here on, the directions will be reversed. If you drag to the right the drop placeholder will be seen on the left and vice versa.
Am I doing something wrong?

Edit: It seems that the problem occurs only when I change the width of the placeholder and when passing from the first droplist to the second droplist. In this case I do not land on the space intended for the drop placeholder but on another list item. The problem seems to be in the "_getItemIndexFromPointerPosition" method, where, analyzing the conditions, the case of not landing on the placeholder is not allowed. In fact, everything works fine when landing on the placeholder and then moving to the other list item since the condition "drag == this._previousSwap.drag" will result false and will allow the placeholder to be recalculated. While having a custom width of the placeholder and landing directly on the element make the previous condition to will always be true.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-aotvtz
Steps to reproduce:
1. Drag the "component2" div and go to the bottom left from the first row to the second row
2. Keep dragging and start moving to the left/right

### Expected Behavior

I expect the placeholder to show up based on where the cursor is when entering the drop list and that the direction is not reversed, like it does when dragging the "component2" div going from right to bottom right.

### Actual Behavior

The placeholder appears regardless of the cursor position when entering the droplist and the direction is reversed
### Environment

- Angular: 17.3.5
- CDK/Material: 17.3.5
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOs

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

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

Hướng nghiên cứu

Tái hiện vấn đề bằng StackBlitz được liên kết, kéo component2 giữa hai danh sách thả ngang với một placeholder có chiều rộng tùy chỉnh. Bắt đầu bằng cách đọc _getItemIndexFromPointerPosition và theo dõi cách trạng thái swap trước đó được xử lý khi đi vào danh sách thứ hai. Hoàn tất khi placeholder đi theo vị trí con trỏ và hướng của nó không bị đảo ngược khi di chuyển sang trái hoặc phải.

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ó
3/5
Thời gian dự kiến
1-2 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
45/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.