是否可以禁用对 cdkDrag 的子元素的拖动？答案

【问题标题】：Is it possible to disable dragging on a sub-element of cdkDrag?是否可以禁用对 cdkDrag 的子元素的拖动？
【发布时间】：2023-03-07 05:24:01
【问题描述】：

我正在使用来自 Angular Material 的 Angular CDK 拖放（请参阅文档 here）。我想知道是否可以禁用拖动cdkDrag 的子元素。问题是无法使用鼠标选择可拖动元素的input 中写入的内容。

所以，我想要做的是禁止拖动具有cdkDrag 指令的元素下的所有input。

我尝试过使用：

cdkDragHandle：这会将拖动放在特定元素上，而不是我想在这里做的事情
cdkDragDisabled：这将禁用拖动整个元素，而不是我想在这里做的事情

我的代码如下所示：

<div cdkDropList (cdkDropListDropped)="drop($event)">
    <div *ngFor="let element of array" cdkDrag>
        <div>
            <mat-form-field>
                <mat-label>Input 1</mat-label>
                <input matInput type="text">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Input 2</mat-label>
                <input matInput type="number">
            </mat-form-field>
        </div>
    </div>
</div>

提前感谢您的帮助和时间。

【问题讨论】：

您可以添加延迟，例如150 毫秒或 200 毫秒<div *ngFor="let element of array" cdkDrag [cdkDragStartDelay]="150" > 这给你一个选择文本的变化
@Eliseo 它并没有真正做到我想要的，并且也在主 div 上设置了延迟。不过，感谢您的帮助！
我知道为时已晚，我只是在stackoverflow.com/questions/62304645/… 中回答一个问题，您可以使用一个变量“itemselected”和 [cdkDragDisabled]="itemselected==i"
@Gaetitan 你有没有找到合适的解决方案？
@StringName 不幸的是我没有，所以我保留了它。

标签： angular angular-material angular-cdk

【解决方案1】：

这是一个简单的解决方法：

app.component.css

.display-none {
  display: none;
}

app.component.html

<div cdkDropList (cdkDropListDropped)="drop($event)">
    <div *ngFor="let element of array" cdkDrag>
        <div>
            <mat-form-field>
                <mat-label>Input 1</mat-label>
                <input matInput type="text" cdkDrag cdkDragPreviewClass="display-none">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Input 2</mat-label>
                <input matInput type="number" cdkDrag cdkDragPreviewClass="display-none">
            </mat-form-field>
        </div>
    </div>
</div>

只需将cdkDrag cdkDragPreviewClass="display-none" 添加到您的输入元素。这应该对你有帮助。

【讨论】：

输入上的cdkDrag 使输入可拖动。
没错，但是一旦有display: none样式就会被销毁。
我尝试了您的解决方案，但似乎 cdkDragPreviewClass 不存在。你是说<input cdkDrag *cdkDragPreview class="display_none">？
确保在组件样式中添加.display-none { display: none; }

【解决方案2】：

您可以在表单字段上停止 mousedown 事件传播。将以下内容添加到表单字段元素：(mousedown)="$event.stopPropagation()"。

当您尝试单击表单域时，这会阻止拖动事件发生，并允许您与该表单域正常交互。

<div cdkDropList (cdkDropListDropped)="drop($event)">
    <div *ngFor="let element of array" cdkDrag>
        <div>
            <mat-form-field>
                <mat-label>Input 1</mat-label>
                <input matInput type="text"(mousedown)="$event.stopPropagation()">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Input 2</mat-label>
                <input matInput type="number"(mousedown)="$event.stopPropagation()">
            </mat-form-field>
        </div>
    </div>
</div>

【讨论】：

这正是我想要的，非常感谢！