Javascript 在容器上移动元素时检测容器

我正在制作一个简单的拖放界面。我有一堆容器（“包装器”）和一些动态添加的项目（“dragElement”）在其中一个容器中。所以我需要，当我将项目移动到另一个容器上时，JS检测它，并在拖动完成时将项目移动到那里

我尝试在拖动项目时检测带有“onmouseover”和“mouseup”的容器，但没有成功，因为实际上，鼠标总是在被拖动的元素上。 那么，当拖动项目时，如何检测容器？请用纯JS

document.onmousedown = function(e) {

    var dragElement = e.target;

    if (!dragElement.classList.contains('draggable')) return;

    var coords, shiftX, shiftY, detectPage;

    startDrag(e.clientX, e.clientY);

    document.onmousemove = function(e) {
        moveAt(e.clientX, e.clientY);
    };

    wrapper.onmouseover = function(e) {
        detectPage = e.target;
        console.log(detectPage);
    };

    dragElement.onmouseup = function() {
        finishDrag();
    };

    function startDrag(clientX, clientY) {

        shiftX = clientX - dragElement.getBoundingClientRect().left;
        shiftY = clientY - dragElement.getBoundingClientRect().top;

        dragElement.style.position = 'fixed';

        document.body.appendChild(dragElement);

        moveAt(clientX, clientY);

    };

    function finishDrag() {

        dragElement.style.top = parseInt(dragElement.style.top) - wrapper.getBoundingClientRect().top + 'px';
        dragElement.style.position = 'absolute';

        wrapper.onmouseup = function(e) {
            var selectPage = e.target;
        }

        wrapper.appendChild(dragElement);

        document.onmousemove = null;
        dragElement.onmouseup = null;

    };

    function moveAt(clientX, clientY) {
        var newX = clientX - shiftX;
        var newY = clientY - shiftY;

        if (newX < 0) newX = 0;
        if (newX > wrapper.offsetWidth - dragElement.offsetWidth) {
            newX = wrapper.offsetWidth - dragElement.offsetWidth;
        }

        dragElement.style.left = newX + 'px';
        dragElement.style.top = newY + 'px';
    };

    return false;
};

document.onmousedown=函数（e）{
var dragElement=e.目标；
如果（！dragElement.classList.contains（'draggable'））返回；
var坐标、shiftX、shiftY、detectPage；
startDrag（e.clientX，e.clientY）；
document.onmousemove=函数（e）{
moveAt（e.clientX，e.clientY）；
};
wrapper.onmouseover=函数（e）{
检测页=e.目标；
控制台日志（detectPage）；
};
dragElement.onmouseup=函数（）{
finishDrag（）；
};
函数startDrag（clientX，clientY）{
shiftX=clientX-dragElement.getBoundingClientRect（）.left；
shiftY=clientY-dragElement.getBoundingClientRect（）.top；
dragElement.style.position='固定'；
文件.正文.附件（dragElement）；
moveAt（clientX，clientY）；
};
函数finishDrag（）{
dragElement.style.top=parseInt（dragElement.style.top）-wrapper.getBoundingClientRect（）.top+'px'；
dragElement.style.position='绝对'；
wrapper.onmouseup=函数（e）{
var selectPage=e.target；
}
包装器。附件（dragElement）；
document.onmousemove=null；
dragElement.onmouseup=null；
};
函数moveAt（clientX，clientY）{
var newX=clientX-shiftX；
var newY=客户-转移；
如果（newX<0）newX=0；
if（newX>wrapper.offsetWidth-dragelment.offsetWidth）{
newX=wrapper.offsetWidth-dragElement.offsetWidth；
}
dragElement.style.left=newX+'px'；
dragElement.style.top=newY+'px'；
};
返回false；
};

好吧，没人帮忙。所以一天的空闲时间去寻找解决方案。我所能找到的就是从

dragElement.onmouseup

中删除函数

finishDrag（）

，并将其更改为下面的代码

如果在较短的时间内，

onmouseup

出现时，

dragElement

必须转到

display:none

，现在我们可以通过

elementFromPoint

访问鼠标光标附近的对象。完成后，我们可以很容易地检测到容器，将一个元素返回到

显示：block

，并将其放入该容器中

希望，这对某人有帮助

    dragElement.onmouseup = function(e) {

        dragElement.style.display = 'none';

        var selectPage = document.elementFromPoint(e.clientX, e.clientY);

        dragElement.style.display = 'block';

        dragElement.style.top = parseInt(dragElement.style.top) - selectPage.getBoundingClientRect().top + 'px';
        dragElement.style.position = 'absolute';

        selectPage.appendChild(dragElement);

        document.onmousemove = null;
        dragElement.onmouseup = null;

    };