检测容器，同时在其上移动元素答案

【问题标题】：Detect container, while moving an element over it检测容器，同时在其上移动元素
【发布时间】：2023-04-08 03:15:01
【问题描述】：

我制作了一个简单的拖放界面。我有一堆容器（“包装器”）和其中一个动态添加的项目（“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;
};

【问题讨论】：

标签： javascript drag-and-drop draggable

【解决方案1】：

好吧，没有人帮忙。因此，我们花了一天的空闲时间来寻找解决方案。我能找到的只是从dragElement.onmouseup 中删除函数finishDrag() 并将其更改为下面的代码。

如果更短，当onmouseup 到来时，dragElement 必须转到display:none，现在我们可以通过elementFromPoint 访问鼠标光标附近的对象。完成后，我们可以轻松检测容器，将元素带回 display: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;

    };

【讨论】：