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

好吧，没有人帮忙。所以有一天免费找到解决方案。我所能找到的就是从finishDrag()删除函数dragElement.onmouseup并将其更改为以下代码。

如果更短，当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;

    };

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

1 个答案: