How to appendchild() using drag drop with 2 hierarchically equal divs? using Typescript

41 Views Asked by At

**Right Element 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>

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

image

I need to drag and drop one of the items on the left into the element on the right. When I drop, this item must now be the child of the element on the right. I'm having trouble writing the code to make this happen. Could you help me? I'm new to Angular (v17.3.0)

I've tried HTMLDivElement solutions but not worked actually. There must be a drop event but couldn't write the code accurately.

EDIT: Sorry for lack of information, I have checked the examples of this site. These solutions don't allow a pixel perfect approach. It just puts the item in array and implement it. I bothered you for more difficult thing actually. When I drop, it must be sticked to other div in the same position as coordinates.

0

There are 0 best solutions below