JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://eruciform.com/static//jquidragcollide/jquery-collision.js"></script>
<script src="http://eruciform.com/static//jquidragcollide/jquery-ui-draggable-collision.js"></script>
<div id="board">
    <div class="draggable ui-widget-content" style="left:100px; top: 20px;" id="b"></div>
    <div class="obstacle" style="left:170px; top:170px;width:130px;height:130px;" id="d"></div>
</div>

CSS

.draggable {
    width: 120px;
    height: 120px;
    position: absolute;
    background-color: #0000ff;
}
.obstacle {
    width: 100px;
    height: 100px;
    margin: 0;
    position: absolute;
    background-color: #ff0000;
}
.collision {
    background-color: #00ffff;
    pointer-events: none;
    position: absolute !important;
}
#board {
    width: 400px;
    height: 300px;
    border: 0;
    border-collapse: collapse;
    margin: 0;
    position: absolute;
}

JavaScript

function clearCollision(event, ui) {
        $(".collision").remove();
    }

    function handleCollision(event, ui) {
        $(event.collision).addClass("collision").each(function () {
            var d = $(this).data("direction");
            $(this).appendTo("body");
        });
    }



    $(function () {
        $(".draggable").each(function () {
            $(this).draggable({
                containment: "#board",
                obstacle: ".obstacle",
                restraint: ".restraint",
                directionData: "direction",
                relative: "body"
            });
        });
        $("#b").bind("precollision", clearCollision);
        $("#b").bind("collision", handleCollision);
    });