Как я могу определить какой div я перемещаю (dragNdrop)?

Question

[crack_user]

Имеется таск лист с задачами и в этих задачах есть подзадачи и я хочу определить какую задачу я хочу поменять местами, главную или подзадачу

<div class="tasks">
       <h1 class="tasks__title">To do list</h1>
       <div class="tasks__list">
           <div class="tasks__item" ><p class="drag-handler">Drag it</p><p>

            <div class="tasks__lists">
                <div class="tasks__item" ><p class="drag-handlers">Подзадача</p><p>learn HTML</p></div>
                <div class="tasks__item" ><p class="drag-handlers">Подзадача</p><p>learn HTML</p></div>
            </div>


           </p></div>
           <div class="tasks__item" ><p class="drag-handler">Задача</p><p>learn CSS</p></div>
           <div class="tasks__item" ><p class="drag-handler">Задача</p><p>learn JavaScript</p></div>
           <div class="tasks__item" ><p class="drag-handler">Задача</p><p>learn PHP</p></div>
           <div class="tasks__item" ><p class="drag-handler">Задача</p><p>stay alive</p></div>
       </div>
   </div>

let tasksListElement = document.querySelector(`.tasks__lists`);
   let taskElements = tasksListElement.querySelectorAll(`.drag-handlers`);
  
    for (const task of taskElements) {
        task.draggable = true;
    }

    tasksListElement.addEventListener(`dragstart`, (evt) => {
        evt.target.parentElement.classList.add(`selected`);
    });

    tasksListElement.addEventListener(`dragend`, (evt) => {
        evt.target.parentElement.classList.remove(`selected`);
    });
    
    const getNextElement = (cursorPosition, currentElement) => {
        const currentElementCoord = currentElement.getBoundingClientRect();
        const currentElementCenter = currentElementCoord.x + currentElementCoord.width / 2;
    
        const nextElement = (cursorPosition < currentElementCenter) ?
            currentElement :
            currentElement.nextElementSibling;
    
        return nextElement;
    };

    tasksListElement.addEventListener(`dragover`, (evt) => {
        evt.preventDefault();
    
        const activeElement = tasksListElement.querySelector(`.selected`);
        const currentElement = evt.target.parentElement;
        const isMoveable = activeElement !== currentElement &&
            currentElement.classList.contains(`tasks__item`);
    
        if (!isMoveable) {
            return;
        }
    
        const nextElement = getNextElement(evt.clientX, currentElement);
        tasksListElement.insertBefore(activeElement, nextElement);
    })