contenteditable - contenteditable 不适用于 cdkDrag
问题描述
我正在尝试使用 div 元素标记并使其表现为带有 css 的文本区域。
#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 无法与 cdkDrag 在 google-chrome 上正常工作,解释相同,但无法得到任何答案。
解决方案
CDKDragRef
监听该mousedown
事件,因此您可以(mousedown)="$event.stopPropagation()"
向 div 添加一个处理程序,contenteditable
以防止该事件冒泡到具有该cdkDrag
指令的元素。
编辑:这是 CDKDragRef
代码中的调用站点:https ://github.com/angular/components/blob/master/src/cdk/drag-drop/drag-ref.ts#L775