Question

我的模板：

<div cdkDrag>
  <input id='myInput'>
  <div>Hello World</div>
</div>

现在，当用户单击输入“ myInput”并尝试选择文本时，将捕获鼠标移动以拖动cdkDrag容器，因此无法选择文本。

如何在cdkDrag容器内的html输入中恢复用于文本选择的默认单击和拖动行为？

Answer 1

我遇到了滚动溢出的类似问题。它会捕获拖动容器，而我无法滚动。我的解决方案是使用拖动手柄。 Customizing the drag area using a handle

<div cdkDrag>
  <input id='myInput'>
  <div>Hello World</div>

  <div cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h- 
        3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </div>
</div>

编辑：一种更适合您的问题的解决方案。我做了一个StackBlitz来玩耍

您可以在用户单击特定元素时禁用拖放。

<div cdkDropList class="example-list" [cdkDropListDisabled]="textClick">
  <div cdkDrag >
    <input id='myInput' (click)="onTextClick()">
    <div>Hello World</div>
  </div>
</div>

然后在您的组件中

export class AppComponent  {
  name = 'Angular';
  textClick = false;

  onTextClick(){
    this.textClick = true;
  }
}

您仍然需要找到一种释放它以再次滚动的方法

角度cdk拖动：恢复cdkDrag容器内html输入中的文本选择的默认单击和拖动行为

1 个答案: