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="container">
    <img id="image" src="http://www.locationscout.net/public/images/2015-02/externsteine-germany_l.jpeg" />
    <div id="drag1"></div>
    <div id="drag2"></div>
    <div id="drag3"></div>
</div>

CSS

img#image{
    position: relative;
    width: 600px;
}
div#container div{
    position: absolute;
    background: #ccc;
    top: 0px;
    opacity: 0.8;
    margin: 0.5px;
}
div#drag1{
    height: 100px;
    width: 150px;
    left: 0px;
}
div#drag2{
    height: 150px;
    width: 200px;
    left: 200px;
}
div#drag3{
    height: 80px;
    width: 100px;
    left: 450px;
}

JavaScript

$("#drag1").draggable({
    obstacle: "#drag2, #drag3",
    preventCollision: true,
    containment: "#image"
});
$("#drag2").draggable({
    obstacle: "#drag1, #drag3",
    preventCollision: true,
    containment: "#image"
});
$("#drag3").draggable({
    obstacle: "#drag2, #drag1",
    preventCollision: true,
    containment: "#image"
});