javascript - 如何计算并确定 div 必须放置的区域？

Question

我正在纯粹用 Javascript 构建一个拖放应用程序。我已经对拖动部分进行了编码，可以在页面中随机拖放元素。现在，我已经构建了一个包含 9 个框(div)的放置区，其中必须放置 9 个 div。我想不出有什么方法可以帮助我完成这项任务。我正在考虑使这些 div 成为“绝对”并使用顶部和左侧属性重新构建它们。但我应该如何进一步进行呢？我拖动的 div(即 onmousedown)如何知道 onmouseup 它应该放在指定位置。示例:如果我选择编号为 1 的 div，它应该落在编号为 1 的目标处。

这是我用于选择和拖动的 Javascript:

window.onload = function() {
    var el = document.getElementById('block1');
    var mover = false, x, y, posx, posy, first = true;
    el.onmousedown = function() {
        mover = true;
    };
    el.onmouseup = function() {
        mover = false;
        first = true;
    };
    el.onmousemove = function(e) {
        if (mover) {
            if (first) {
                x = e.offsetX;
                y = e.offsetY;
                first = false;
            }
            posx = e.pageX - x;
            posy = e.pageY - y;
            this.style.left = posx + 'px';
            this.style.top = posy + 'px';
        }
    };
};

Answer 1

我会让目标识别“onmouseenter”并将该目标的 bool 值设置为 true，然后将其设置为 false“onmouseleave”。然后“onmouseup”检查所有 bool 值，如果 div1 已被删除且 target1 为 true，则 div1 位置 = 目标位置。

我知道这是一个伪代码答案，但这只是我解决问题的思考过程。