JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<script src="https://psuk.s3.amazonaws.com/script/js/lib/jquery.collision.js"></script>
<script src="https://psuk.s3.amazonaws.com/script/js/lib/jquery.collision.ui.draggable.js"></script>
<h1>Detect overlapping with JavaScript</h1>

<div id="area">
    <div id="box0"></div>
    <div id="box1" class="mebox">1</div>
    <div id="box2" class="mebox">2</div>
    <div id="box3" class="mebox">3</div>
    <div id="box4" class="mebox">4</div>
</div>

CSS

body {
    font-size:12px;
    padding: 30px;
    color: #444;
    font-family: Arial, sans-serif;
}
h1 {
    font-size: 24px;
    margin-bottom: 20px;
}
#area {
    border: 2px solid gray;
    width: 500px;
    height: 400px;
    position: relative;
}
#area > div {
    background-color: rgba(122, 122, 122, 0.3);
    position: absolute;
    text-align: center;
    font-size: 50px;
    width: 60px;
    height: 60px;
}
#box0 {
    background-color: rgba(255, 0, 0, 0.5) !important;
    top: 150px;
    left: 150px;
}
#box1 {
    top: 260px;
    left: 50px;
}
#box2 {
    top: 110px;
    left: 160px;
}
#box3 {
    top: 200px;
    left: 200px;
}
#box4 {
    top: 50px;
    left: 400px;
}
p {
    margin: 5px 0;
}
#contextmenu {
    z-index:5;
    background-color:#fff;
    border:1px solid #ccc;
    position:absolute;
    left:20px;
    top:20px;
    min-width:100px;
    box-shadow: 2px 2px 5px #ccc;
    -webkit-box-shadow: 2px 2px 5px #ccc;
    border-radius:3px;
}
#contextmenu > ul {
    padding:0;
    margin:0;
    list-style:none;
}
#contextmenu > ul > li.header {
    background-color: #5F5A5F;
    color:#fff;
    padding:5px;
}
#contextmenu > ul > li.footer {
    background-color: #EBEBEB;
    text-align: center;
    font-size:10px;
}
#contextmenu > ul > li > a {
    display:block;
    text-decoration:none;
    color:#333;
    padding:5px;
}
#contextmenu > ul > li > a:hover {
    background-color:#fafafa;
}

JavaScript

var overlaps = (function () {
    function getPositions(elem) {
        var pos, width, height;
        pos = $(elem).position();
        width = $(elem).width();
        height = $(elem).height();
        return [[pos.left, pos.left + width], [pos.top, pos.top + height]];
    }

    function comparePositions(p1, p2) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function (a, b) {
        var pos1 = getPositions(a),
            pos2 = getPositions(b);
        return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
    };
})();

var _contextmenu = function (obj) {

    var html = '<div id="contextmenu" style="top:'+(obj.position.top)+';left:'+(obj.position.left)+'"><ul> <li class="header">' + obj.title + '</li>';
    if (jQuery.isArray(obj.menu)) {
        $(obj.menu).each(function (k, v) {
            html += '<li><a href="javascript:void(0)" id="' + (v.id ? v.id : '') + '" class="' + (v.class ? v.class : '') + '">' + (v.icon ? v.icon : '') + v.name + '</a></li>';
        });
    }
    html += '<li class="footer"><a href="javascript:void(0)" id="contextmenu-close" onclick="return $(\'#contextmenu\').remove();">CLOSE</a></li></ul></div>';

    return $('body').prepend(html);

    


}

$(function () {

    $('#box0').draggable({
        containment: '#area',
        obstacle: ".mebox",
        drag: function (e, ui) {},
        stop: function (e, ui) {

            var box = $(this)[0];
            var collide = false;
            $('.mebox').each(function () {
                if (overlaps(box, $(this)[0]) === true) {
                    collide = true;
                    return false;
                }
            });

            if (collide) {
                var pos_top = ui.position.top;
                var pos_left = ui.position.left;
                _contextmenu({
                    title: 'Collision',
            ...