javascript - 获得选择，可拖动和可编辑的内容以一起工作

我正在开发一个高度依赖拖放的应用程序。在进行处理时，我遇到了一些选择，可拖动和可编辑内容相互配合使用的问题。在Chrome中有效的方法在Firefox上无效，反之亦然。

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

我对stackblitz here上的问题做了最小化的表示。

当用户单击以编辑内容可编辑的文本时，我要使文本自动选择，以便他们可以轻松地替换它。这段文字位于可拖动div内的某处。
到目前为止，在Chrome和Firefox中都无法实现这一目标。

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

最佳答案

对于自动选择，您可以使用@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;
    }
  }
}

关于javascript - 获得选择，可拖动和可编辑的内容以一起工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57785630/