如何在Angular中更改块的位置？

Question

页面上有div元素：

<div #draggable></div>

@ViewChild('draggable') private draggableElement: ElementRef;

我监听滚动事件并尝试更改此块的位置：

@HostListener('window:scroll', ['$event']) onScrollEvent($event){
    this.draggableElement.nativeElement.clientTop = 200;
  }

但这不起作用！

Answer 1

如果元素具有绝对位置，则可以设置left和top样式属性：

this.draggableElement.nativeElement.style.left = "100px";
this.draggableElement.nativeElement.style.top = "200px";

另一种方法是使用CSS转换将其移动：

this.draggableElement.nativeElement.style.transform = "translateX(100px)";
this.draggableElement.nativeElement.style.transform = "translateY(200px)";
this.draggableElement.nativeElement.style.transform = "translate(100px, 200px)";