angular / angular/components

Cdk Drag Item With Boundaries Breaks on Touch Screen Pinch

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

### Which @angular/* package(s) are the source of the bug?

Don't known / other

### Is this a regression?

No

### Description

Go to your website to this link: https://angular.dev/guide/drag-drop#restrict-movement-within-an-element on a touch screen device
1. Go to the cdkDrag item with the boundaries.
2. Start a pinch motion with one finger on the drag item and one outside
3. Try a few times because it does work every time
4. Observe the cdkDrag item float out of the area

### Please provide a link to a minimal reproduction of the bug

https://angular.dev/guide/drag-drop#restrict-movement-within-an-element

### Please provide the exception or error you saw

```true
This error on every touch move event
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
```

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 20.3.20
Node: 22.14.0
Package Manager: npm 10.9.2
OS: win32 x64

Angular: 20.3.18
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser, router

Package Version
---------------------------------------
@angular-devkit/architect 0.2003.20
@angular-devkit/build-angular 20.3.20
@angular-devkit/core 20.3.20
@angular-devkit/schematics 20.3.20
@angular/build 20.3.20
@angular/cdk 20.2.14
@angular/cli 20.3.20
@angular/material 20.2.14
@schematics/angular 20.3.20
ng-packagr 20.3.2
rxjs 7.8.2
typescript 5.9.3
zone.js 0.15.1
```

### Anything else?

_No response_

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

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

Hướng nghiên cứu

Bắt đầu với ví dụ Angular CDK drag-drop tại angular.dev/guide/drag-drop#restrict-movement-within-an-element và tái hiện vấn đề trên màn hình cảm ứng bằng cử chỉ chụm được mô tả. Theo dõi việc xử lý touchmove của mục được kéo và can thiệp cancelable=false; hoàn thành khi mục vẫn nằm trong ranh giới của nó trong suốt cử chỉ mà không xuất hiện lỗi được báo cáo.

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
Ít trao đổi
Độ 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.