contenteditable不适用于cdkDrag

Question

我正在尝试使用div元素标签，并使其表现为具有CSS的textarea。

#textarea {
    -moz-appearance: textfield-multiline;   ------------ card.component.css
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

<div id="textarea" contenteditable>I look like a textarea</div>  ---- card.component.html

但是我在父组件（类别组件）的卡上使用cdkDrag

<div cdkDrag class="col-sm-12 px-2 pb-2">
  <app-card (cardEvent)="deleteCard($event)" [card]="card">

我发现此链接contenteditable not working properly with cdkDrag on google-chrome解释了相同的内容，但没有任何答案。

Answer 1

问题是由left click mouse events being absorbed指令引起的CdkDrag引起的。如果使用选项卡导航到元素或右键单击它，则可以进行编辑以确认这一点。

一种可能的解决方案是将cdkDragDisabled指令的CdkDrag属性设置为true，例如

<div cdkDrag cdkDragDisabled="some condition" ...

编辑时间。