angular / angular/components

bug(drag-drop): changing the disable state dynamically doesn't work

未关闭
#19,065 10 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/drag-drop P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### Reproduction

For some reason, in Stackblitz it works: https://stackblitz.com/edit/angular-ghqzcr
But in a new project, the bug also reproduces: https://github.com/doronsever/drag-drop-bug
I copied everything from stackblitz to my project and still doesn't work.

I need the initiate state of the drag and drop to be disabled and only when clicking on the mouse down to enable it.
The reason for that is that I have also a resize option and if the drag and drop is enabled, when resizing it is also dragging the element.

So in my real app, I'm starting with the drag and drop disabled, and on a mousedown event, I check if the mouse is not touching the resize button and only then enabling the drag and drop.
Up until Angular 8, everything worked fine but now that we are trying to upgrade to Angular 9 (and also material to 9, this behavior stopped working).


#### Expected Behavior

When setting the flag to false, enable the dragging even if the mouse is down.

#### Actual Behavior

drag and drop doesn't work

#### Environment

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

贡献指南

打开贡献指南

调研方向

首先比较 StackBlitz 复现与链接的 new-project 复现,重点关注 Angular CDK 的 drag-and-drop 设置以及动态 disabled 标志。在 Chrome 中复现 Angular 9.1.1/Material 9.2.0 的行为,然后验证可以在 mousedown 期间启用拖动,同时调整大小不会开始拖动。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。