Я хочу реализовать функцию перетаскивания для textarea с использованием CDK в Angular 2, но он не работает должным образом - PullRequest
Новая
       24

Я хочу реализовать функцию перетаскивания для textarea с использованием CDK в Angular 2, но он не работает должным образом

0 голосов
/ 29 января 2019

У меня есть файл 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, и выбор в основном используется для индекса, так как должна отображаться текстовая область, которая зависит от значения left и top, которое хранится в jsonRef.Теперь onDragMoved я обновляю значение left и сохраняется в jsonRef с помощью event.pointerPosition.x и event.pointerPosition.y, так как jsonRef обновляет нашу текстовую область, которая также должна отображаться так, но для метода dragEnded, написанного в файле .ts, textArea помещается далекоот указателя или курсора которого мы сохранили значение в jsonRef.Итак, как я могу решить эту проблему?Я хочу разместить текстовую область в позиции курсора.

Заранее спасибо.

...