当使用JavaScript拖动DOM时，如何获取DOM中的项位置

我对JavaScript中的拖动API有一些问题

我想制作一些类似Trello的页面，当我拖动Trello中的某个元素并将其移动到某个有效的放置目标时，它是这样的

我的问题是，当我的项目进入html中的某个有效目标时，如何获得该项目的位置，以生成具有类似于图像背景颜色的空白框

我对我的整个列表使用了

dragover

和

drop

，我的意思是

ul

，当客户离开鼠标时，它会附加到列表的末尾，但我想将它附加到客户留在列表中的任何位置

listContainer.addEventListener('drop', function(e){
    e.preventDefault();
    if(e.dataTransfer.getData('text/html').split('-')[0] === 'card'){
        listContainer.appendChild(document.getElementById(e.dataTransfer.getData('text/html')));
    }
});
listContainer.addEventListener('dragover', function(e){
    e.preventDefault();
});

这是我的

dragstart

事件

document.addEventListener('dragstart', function(e){
    if(e.target.classList.contains('task')){
        e.dataTransfer.setData('text/html', e.target.id);
    }
});

请注意，我只想用JavaScript而不是JQuery或其他东西来实现它