Question

当前正在实现一个应用程序，我想在其中添加文本到文本区域。完成后，我需要将文本区域拖到屏幕上的任何位置。目前，我的屏幕布满了画布。表示我在单击按钮时动态添加了文本区域。完成后，应该可以在屏幕上拖动它。

到目前为止，我已经完成了下面的代码，但实际上不起作用。我没有收到任何错误，但是函数也没有得到调用。

任何帮助都是有意义的。

下面是我的代码。

1。 dragable.directive.ts

import { Directive } from "@angular/core";
import { DragService } from "./dragservice.service";
import { HostBinding, Input } from "@angular/core";
import { HostListener } from "@angular/core";

@Directive({
    selector: '[myDraggable]'
})

export class DraggableDirective {
    constructor(private dragService: DragService) {

    }

    @HostBinding('draggable')
    get draggable() {
        return true;
    }

    @Input()
    set myDraggable(options: DraggableOptions){
        if(options){
            this.options = options;
        }
    }

    private options: DraggableOptions = {};

    @HostListener('dragstart', ['event'])
    ondragstart(event){
        const { zone = 'zone', data = {} } = this.options;
        this.dragService.startDrag(zone);
        event.dataTransfer.setData('Text', JSON.stringify(data));
    }
}

export interface DraggableOptions {
    zone?: string;
    data?: any;
  }

2。 dragservice.service.ts

import { Injectable } from "@angular/core";


@Injectable()
export class DragService {
    private zone: string;


    startDrag(zone: string){
        this.zone = zone;
    }

    accepts(zone: string): boolean{
        return zone == this.zone;
    }
}

3。 droptarget.directive.ts

import { Directive, Input, Output, EventEmitter, HostListener } from '@angular/core';
import { DragService } from './dragservice.service';


@Directive({
    selector: '[myDropTarget]'
  })
  export class DropTargetDirective {
    constructor(private dragService: DragService) {
    }

    @Input()
    set myDropTarget(options: DropTargetOptions) {
      if (options) {
        this.options = options;
      }
    }

    @Output('myDrop') drop = new EventEmitter();

    private options: DropTargetOptions = {};

    @HostListener('dragenter', ['$event'])
    @HostListener('dragover', ['$event'])
    onDragOver(event) {
      const { zone = 'zone' } = this.options;

      if (this.dragService.accepts(zone)) {
         event.preventDefault();
      }
    }

    @HostListener('drop', ['$event'])
    onDrop(event) {
      const data =  JSON.parse(event.dataTransfer.getData('Text'));

      this.drop.next(data);
    }
  }
  export interface DropTargetOptions {
    zone?: string;
  }

4。 image-home.html

<canvas myDropTarget (myDrop)="onDrop($event)" class="drop-target" width="400" height="400" (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' [ngStyle]="{'background': '#fff url(' + selectedImage + ') no-repeat 0 0', 'background-size' : 'contain',
'background-position': 'center'}" #canvas ></canvas>
<!--<textarea *ngFor="let i of numberTextArea"></textarea>-->
<div *ngFor="let textarea of textAreasList; let textarea_index= index" style="position: absolute;
top: 50%;
left: 30%;">
    <textarea [myDraggable]="{data: 'Draggable A'}" class="draggable" name="{{textarea}}" (dragstart)="drag($event)" style="border: 1px dotted black;
    height: 40px;
    width: 100%;" (focus)="openKeyboard($event,textarea_index)" (keyup.enter)="onEnter($event)"></textarea>
    <button (click)="removeTextArea(textarea_index)">Remove</button>
</div>

Angular 4-拖动文本区域并将其拖放到画布上的任何位置

0 个答案: