如何使用拖放和 2 个层次相等的 div 来追加 child() ？使用打字稿

Question

**右元素 div -> **

<div class="example-box2" id="2" cdkDrag cdkDropList>
   
        <div class="example-handle" cdkDragHandle cdkDragBoundary>
          <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
            <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
            <path d="M0 0h24v24H0z" fill="none"></path>
          </svg>
        </div>
      </div>

左侧项目 div ->

<div class="example-box" id="1"  cdkDrag>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Home">
                          <i class="bi-house fs-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
                            <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"/>
                            <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"/>
                          </svg></i>
                      </a>
                      </div> 

我需要将左侧的一项拖放到右侧的元素中。当我放下时，该项目现在必须是右侧元素的子元素。我在编写代码来实现这一点时遇到了麻烦。你可以帮帮我吗？我是 Angular (v17.3.0) 新手

我尝试过 HTMLDivElement 解决方案，但实际上没有起作用。肯定有drop事件但是无法准确写出代码

Answer 1

https://stackblitz.com/edit/drag-and-drop-demo?file=src%2Fapp%2Fapp.component.ts

检查此链接，您会找到您的答案