本文介绍了contenteditable无法与cdkDrag一起使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am trying to use a div element tag and make it behave as a textarea with 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(类别组件)

But i am using cdkDrag on my card from parent component(Category component)

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

我找到了此链接解释了同样的问题,但无法得到任何答案。

I found this link contenteditable not working properly with cdkDrag on google-chrome explaining the same, but couldn't get any answer.

推荐答案

CDK的 DragRef 收听鼠标按下事件,因此您可以将(mousedown)=''$ event.stopPropagation()''处理程序添加到您的 contenteditable div以防止该事件冒泡到具有 cdkDrag 指令的元素。

CDK's DragRef listens to the mousedown event, so you can add a (mousedown)="$event.stopPropagation()" handler to your contenteditable div to prevent that event from bubbling up to the element that has the cdkDrag directive on it.

编辑:这是CDK DragRef 代码中的呼叫站点:

edit: Here's the call site in the CDK DragRef code: https://github.com/angular/components/blob/master/src/cdk/drag-drop/drag-ref.ts#L775

这篇关于contenteditable无法与cdkDrag一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-29 21:24