Angular 2操纵DOM - 在保留功能的同时将组件从一个地方移动到另一个地方

Question

好的，我有：

<div class="full"></div>
<div class="grid>
    <div class="widget"><widget1></widget1></div>
    <div class="widget"><widget2></widget2></div>
    <div class="widget"><widget3></widget2></div>
    <div class="widget"><widget4></widget2></div>
</div>

每个小部件都是一个组件，其中包含一个按钮：

<div class="resize" (click)="resize($elem)"></div>

现在，当用户点击每个组件上的调整大小按钮时，我希望该组件在类已满的情况下在div上移动，并从网格中移除，并且当单击最大化的组件时，但返回到它的位置并从完整的div中删除。

我需要使用纯JavaScript。

Answer 1

我同意Michal，如果没有捕获，它可能就是这样的：

function resize(element) {
   var where = element.parentNode.className;
    if(where=="full"){
        document.querySelector(".grid").appendChild(element);
    } else {
        document.querySelector(".full").appendChild(element);
    }
}