【JavaScript】实现元素拖拽和碰撞检测

function drag() {
    var src1 = document.getElementById("src-1");
    var src2 = document.getElementById("src-2");
    var src3 = document.getElementById("src-3");

    var srcs = [src1, src2, src3];

    var dest1 = document.getElementById("dest-1");
    var dest2 = document.getElementById("dest-2");
    var dest3 = document.getElementById("dest-3");

    var drag;
    var x, y;

    srcs.forEach(function(item) {
        item.onmousedown = function(e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            x = event.clientX - target.offsetLeft;
            y = event.clientY - target.offsetTop;
            drag = target;
        }
    });

    document.onmousemove = function(e) {
        if (drag) {
            event = e || window.event;

            var left = event.clientX - x;
            var top = event.clientY - y;
            body = document.documentElement || document.body;
            if (left < 0) left = 0;
            if (left > body.offsetWidth - drag.offsetWidth) left = body.offsetWidth - drag.offsetWidth;
            if (top < 0) top = 0;
            if (top > body.offsetHeight - drag.offsetHeight) top = body.offsetHeight - drag.offsetHeight;

            drag.style.left = left + 'px';
            drag.style.top = top + 'px';
        }
    }

    document.onmouseup = function(e) {
        if (drag) {
            if (drag == src1) {
                handler(src1, dest1);
            } else if (drag == src2) {
                handler(src2, dest2);
            } else {
                handler(src3, dest3);
            }
        }
        drag = null;
    }

}

function handler(src, dest) {
    if (acreage(src, dest) == 0) { //未重合
        if (src.getAttribute("id") == "src-1") {
            src.style.left = "10px";
            src.style.top = "50px";
        } else if (src.getAttribute("id") == "src-2") {
            src.style.left = "10px";
            src.style.top = "150px";
        } else {
            src.style.left = "10px";
            src.style.top = "250px";
        }

    } else if (acreage(src, dest) > dest.offsetHeight * dest.offsetWidth * 2 / 3) { //重合超过2/3
        src.style.left = dest.style.left;
        src.style.top = dest.style.top;
        src.onmousedown = null;
    }
}

function acreage(node1, node2) {
    // 计算重合面积
    return 0;
}

drag();