Angular7 - drag an element from child component to parent container

Question

Is there a way to drag an element (let's say a DIV) from child component to parent container?

I've tried to put cdkDrag inside the component on a DIV, and cdkDropList on the container the around that component.

If I put cdkDrag on the component itself <user-component cdkDrag></user-component> it will work, but I need to drag only one element (the user image) from the user-component.

---

container:

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

---

user-component:

<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>

---

But the event never fired. any help? a possible solution might be to drag all the component but use the user-image as a placeholder, but before that, I want to know if there is out-of-the-box solution.