让 select、draggable 和 contenteditable 一起工作答案

【问题标题】：Getting select, draggable and contenteditable to work together让 select、draggable 和 contenteditable 一起工作
【发布时间】：2019-09-04 09:39:28
【问题描述】：

我正在开发一个严重依赖拖放的应用程序。在处理它时，我遇到了一些问题，即选择、可拖动和可内容编辑以相互配合。在 chrome 中有效的在 firefox 上无效，反之亦然。

在 Firefox 中，如果您从其上方的所有元素中删除可拖动元素，则选择可以正常工作。在 chrome 中，您必须禁用 contenteditable 才能使选择生效。

我在 stackblitz here 上对问题做了一个最小的表示

当用户点击编辑一段可编辑的文本时，我想让文本自动选择，以便他们轻松替换它。此文本位于可拖动 div 内的某个位置。到目前为止，在 Chrome 和 Firefox 中实现这一目标并不是很成功。

在大多数情况下，选择根本不起作用。任何帮助将不胜感激！

【问题讨论】：

请把负责拖入您的问题的代码。与 stackblitz 的链接很有帮助，但将来可能会失效。还要描述一下你对 chrome 和 firefox 的尝试和问题。
我添加了拖动功能的代码。

标签： javascript css angular

【解决方案1】：

对于自动选择，您可以使用@ViewChild 它将是这样的

<div #example  draggable="true">
  <p contenteditable="true" class="select">
    Sample paragraph
  </p>
</div>
<button (click)="toggle()">Click to toggle draggable</button>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  private selected = false;
  @ViewChild('example', { static: false }) element;
  toggle(){
    this.element.draggable=!this.element.draggable;
    const item = this.element.nativeElement.children[0];
    this.selected = true;
    item.focus();
  }

  pFocus(event: FocusEvent) {
    if(this.selected) {
     document.execCommand('selectAll', false, null);
     this.selected = false;
    }
  }
}

【讨论】：