Angular7-将元素从子组件拖到父容器

Question

是否可以将元素（例如DIV）从子组件拖到父容器？

我尝试将cdkDrag放在DIV的组件内部，并将cdkDropList放在容器中该组件周围。

如果我将cdkDrag放在组件本身上 <user-component cdkDrag></user-component>可以工作，但是我只需要从user-component拖动一个元素（用户图像）。

---

容器：

<div class="view-container" id="view-container" 
cdkDropList (cdkDropListDropped)="drop($event)"> 
   <user-component></user-component>
</div>

---

用户组件：

<div class="user-image" [style.backgroundImage]="userImage" 
 cdkDrag cdkDragBoundary=".view-container" [cdkDragData]="user"     
 cdkDropListConnectedTo="view-container"></div>
<div class="user-info">
      <h3 class="user-name">{{user?.name}}</h3>
      <p class="user-description">{{user?.description}}</p>
</div>

---

但事件从未触发。有什么帮助吗？ 一个可能的解决方案可能是拖动所有组件，但将用户图像用作占位符，但是在此之前，我想知道是否有现成的解决方案。