2

我正在 Angular 6 中开发拖放应用程序，在拖放操作中，我正在创建新的 HTML 元素（诸如“DIV”、“textarea”等元素），并动态分配样式、属性、默认 x 和 y 坐标到它通过使用应用程序的 ElementRef 和 Renderer2 功能并将新创建的 HTML 元素添加到正在执行拖放操作的父元素。

我还创建了一个角度指令，它将可拖动行为附加到新创建的 HTML 元素，以便用户可以将其移动到父元素上的任何位置。指令的部分代码如下：

@Directive({
  selector: '[appMovable]'
})
export class MovableDirective {

  @HostBinding('style.transform') get transform(): SafeStyle {
    return this.sanitizer.bypassSecurityTrustStyle(
      `translateX(${this.position.x}px) translateY(${this.position.y}px)`);
  }
  private position = {x: 100, y: 0};

  constructor(private sanitizer: DomSanitizer) {
  }

  @HostListener('dragStart') onDragStart() {
    console.log('drag start');
    // Code to calculate the start position of the control being dragged....
  }

  @HostListener('dragMove') onDragMove() {
    console.log('drag move');
    // Code to calculate the current position of the control while it is being dragged....
  }

  @HostListener('dragEnd') onDragEnd() {
    console.log('drag end');
    // Code to calculate the end position of the control being dragged and the the position of the control properly.....
  }
}

虽然我能够将样式、属性和默认 x 和 y 坐标分配给新创建的元素，但我无法将“appMovable”指令绑定到新创建的 HTML 元素。创建 HTML 元素并为其分配不同属性的代码如下：

@Directive({
  selector: '[appDroppable]'
})
export class DroppableDirective {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { 
}

  @HostListener('dragover', ['$event'])
  public onDragOver(evt) {
    evt.preventDefault();
    evt.stopPropagation();
  }

  @HostListener('dragleave', ['$event'])
  public onDragLeave(evt) {
    evt.preventDefault();
    evt.stopPropagation();
  }

  @HostListener('drop', ['$event'])
  public onDrop(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    // Since text element is being dragged so create new textarea html control
    const textareaElement = this.renderer.createElement('textarea');
    this.renderer.setAttribute(textareaElement, 'placeholder', 'click to add content...');
    this.renderer.setAttribute(textareaElement, 'class', 'proInput editing');
    this.renderer.setAttribute(textareaElement, 'draggable', 'true');

    //Assign the appMovable directive to element
    this.renderer.setAttribute(textareaElement, 'appMovable', '');

    // this.renderer.appendChild(newDivElement, textareaElement);
    this.renderer.appendChild(this.elementRef.nativeElement, textareaElement);
  }
}

当我在浏览器调试器工具中检查新创建的 HTML 元素时，我可以看到 appMovable 指令被分配给 HTML 元素，但元素的行为与分配给它的指令不同。

是否还需要做任何其他事情，或者有任何替代选项可以让指令与动态创建的 HTML 元素一起正常工作？

4

0 回答 0