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

【问题标题】：angular cdk drag: Restore the default click and drag behavior for text selection in an html input inside a cdkDrag container角度 cdk 拖动：恢复 cdkDrag 容器内 html 输入中文本选择的默认单击和拖动行为
【发布时间】：2019-07-27 12:06:18
【问题描述】：

我的模板：

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

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

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

【问题讨论】：

标签： angular drag angular-cdk

【解决方案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;
  }
}

你仍然需要想办法释放它以再次滚动

【讨论】：