angular / angular/components

Cdk Drag Item With Boundaries Breaks on Touch Screen Pinch

オープン
#33,026 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: cdk/drag-drop area: core gemini-triaged P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

angular.dev/guide/drag-drop#restrict-movement-within-an-element の Angular CDK drag-drop の例から始め、説明されているピンチジェスチャーを使ってタッチスクリーン上で問題を再現します。ドラッグ対象アイテムの touchmove 処理と cancelable=false の介入を追跡します。ジェスチャー中にアイテムが報告されているエラーなしで境界内に留まれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。