javascript - 检测容器，同时在其上移动元素

Question

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

Answer 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;

    };