javascript - 让选择、可拖动和内容可编辑一起工作

Question

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

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

我已在 stackblitz here 上对问题进行了最小化描述

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

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

Answer 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;
    }
  }
}