Question

我有一个看起来像display_text-area.component.html的文件

<textarea [ngStyle]="{'position':'absolute','z-index':1000,'left':jsonRef[selection].props.left+'px','top':jsonRef[selection].props.top+'px','width':jsonRef[selection].props.width+'px','height':jsonRef[selection].props.height+'px'}" [(ngModel)]="answer" draggable="true" id="0" cdkDrag (cdkDragStarted)="dragStarted($event)"
(cdkDragEnded)="dragEnded($event)"
(cdkDragMoved)="dragMoved($event)"
 ></textarea>

对于这个文件，我有一个display-text-area.component.ts文件，看起来像

    import { Component, OnInit, OnDestroy } from '@angular/core';
import { CdkDragEnd, CdkDragStart, CdkDragMove, CdkDragExit, CdkDragEnter } from '@angular/cdk/drag-drop';

@Component({
  selector: 'pdf-DispplayTextArea',
  templateUrl: './display-text-area.component.html',
  styleUrls: ['./display-text-area.component.scss']
})
export class DisplayTextAreaComponent implements OnInit{
  jsonRef: any[] = [];
  componentsRefs: any[] = [];
  selection: number;
  answer = '';
  constructor(  ) {
}

  ngOnInit() {
  }
  init(selection: any, jsonGroup: any, componentsRefs: any) {
    this.selection = selection.selection;
    this.jsonRef = jsonGroup;
    this.componentsRefs = componentsRefs;
  }

  dragStarted(event: CdkDragStart) {
  }

  dragEnded(event: CdkDragEnd) {
  }

  dragMoved(event: CdkDragMove) {
    console.log(event.pointerPosition.x + ' ' + event.pointerPosition.y);
    this.jsonRef[this.selection].props.left = event.pointerPosition.x;
    this.jsonRef[this.selection].props.top = event.pointerPosition.y;
    console.log(JSON.stringify(this.jsonRef));
   }
}

现在html文件中的jsonRef是JSON对象，选择基本上用于索引，因此应如何显示textarea，该文本区域取决于存储在jsonRef中的left和top的值。现在onDragMoved我正在通过event.pointerPosition.x和event.pointerPosition.y更新left的值并存储在jsonRef中，以便在JSONRef更新时，我们的文本区域也应像这样显示，但是在以.ts文件textArea编写的dragEnded方法上远离我们已将值存储在jsonRef中的指针或光标。那么我该如何解决这类问题呢？我想将文本区域放置在光标的位置。

谢谢。

我想在角度2中使用CDK实现textarea的拖放功能，但无法正常工作

0 个答案: