如何避免div的重叠？

Question

我在javascript中创建了一个用于拖放div的应用程序。 div正在完美地落在所需位置。只有当我尝试将div放在div之上时，它才会重叠并插入到已经存在的div之下，从而破坏整个应用程序。请帮我弄清楚问题。

这是我的JS代码：

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
var mouseOffset = null;
var current_id = null;
var offsetPos = { x: null, y: null };
function selectMe(item,ev) {
    current_id = item;
    offsetPos = getMouseOffset(current_id, ev);
    //document.getElementById("mouse_d").innerHTML = "x: "+ev.pageX+"y: "+ev.pageY; 
}
function mouseMove(ev){ 
        var mouse_cor = mouseCoords(ev);
        document.getElementById("mouseup").innerHTML =" x = "+ ev.x + " y = "+ev.y;
        ev = ev || window.event; 
        var mousePos = mouseCoords(ev);

        if (current_id != null)
        {
            current_id.style.position = 'absolute';
            current_id.style.left = mousePos.x - offsetPos.x + "px";
            current_id.style.top = mousePos.y - offsetPos.y + "px";
            return false;
        }

} 
function mouseCoords(ev){ 
        if(ev.pageX || ev.pageY){ 
                return {x:ev.pageX, y:ev.pageY}; 
            } 
        return { 
                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
                y:ev.clientY + document.body.scrollTop  - document.body.clientTop 
        }; 
}



function getMouseOffset(target, ev) {
    ev = ev || window.event;
    var docPos = getPosition(target);
    var mousePos = mouseCoords(ev);
    return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y };
}

function getPosition(e) {
    var left = 0;
    var top = 0;
    while (e.offsetParent) {
        left += e.offsetLeft;
        top += e.offsetTop;
        e = e.offsetParent;
    }
    left += e.offsetLeft;
    top += e.offsetTop;
    return { x: left, y: top };
}
function mouseUp() {

    var drop_targets = document.getElementsByClassName("drop_box");
    var lhs= document.getElementById("select_zone");
    var temp_id = getPosition(current_id);
    var drop_div = null;
    var current_area = 0;
    var width, height, area;
    if (temp_id.x > lhs.clientWidth)
    {
        for (var i = 0; i < drop_targets.length; i++) {
            var target_width = drop_targets[i].clientWidth;
            var target_height = drop_targets[i].clientHeight;
            /*var curTarget = destination[i];
            var targPos = getPosition(curTarget);
            var targWidth = parseInt(curTarget.offsetWidth); 
            var targHeight = parseInt(curTarget.offsetHeight);*/
            var id_height = current_id.clientWidth;
            var id_width = current_id.clientHeight
            //console.log(id_bounds.left+" "+bounds.left);
            //console.log(bounds.top+" "+bounds.left);
            //var temp1 = id.getBoundingClientRect();;
            var target_position = getPosition(drop_targets[i]);
            var id_position = getPosition(current_id);
            /*document.getElementById(get_pageX).innerHTML = "pageX: "+e.pageX;
            document.getElementById(get_pageY).innerHTML = "pageY: "+e.pageY;
            document.getElementById(get_bounds).innerHTML = "Bounds: "+"top: "+bounds.top+"left: "+bounds.left+"bottom: "+bounds.bottom+"right: "+bounds.right;*/
            console.log("For Target "+i+" ID_position_X: "+id_position.x+" ID_position_Y: "+id_position.y+" Destination_Position_x: "+target_position.x+" Destination_Position_y: "+target_position.y+" Item_Position.x: "+id_position.x);

            if (id_position.x < target_position.x ) 
            {
                width = id_height-(target_position.x-id_position.x);
                console.log("First Width: "+width); 
            }
            else if((id_position.x+id_height) < (target_position.x+target_width))
            { 
                width=id_height;
                console.log("Second Width: "+width);
            }
            else
            {
                width = (target_position.x+target_width)-id_position.x;
                console.log("Third Width: "+width);
            }
            if (id_position.y < target_position.y) 
            {
                height = id_width-(target_position.y-id_position.y);
                console.log("First Height: "+height);
            }
            else if((id_position.y+id_width)<(target_position.y+target_height))
            {
                height = id_width;
                console.log("Second Height: "+height);
            }
            else 
            {
                height = (target_position.y+target_height)-id_position.y;
                console.log("Third Height: "+height);
            }
            console.log("****Area of target "+i+" is "+area+"****");
            if (width >= 0 && height >= 0)
            {
                area = width*height;
                /* console.log("****Area of target "+i+" is "+area+"****"); */
            }
            else 
            {
                area = 0;
            }
            if (area > current_area || current_area == 0) 
            {
                current_area = area;
                drop_div = drop_targets[i];
                /*
                current_id.style.position = "relative";
                current_id.style.left = "5px";
                current_id.style.top = "5px";
                current_id.style.margin = "0px";
                drop_div.appendChild(current_id);
                */
            }
            if (i == 8)
            {
                current_id.style.position = "relative";
                current_id.style.left = "5px";
                current_id.style.top = "5px";
                current_id.style.margin = "0px";
                drop_div.appendChild(current_id);
            }

        }
    }
    else 
    {
        current_id.style.position = "relative";
        current_id.style.left = "0px";
        current_id.style.top = "0px";
    }
    current_id = null;
}

以下是我的完整代码的链接（适用于高于360x640的屏幕分辨率）：https://jsfiddle.net/zoez17z9/