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);
    }
}