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="moveInHere">

    <div id="dragMe">Drag me...</div>

    <div id="butNotHere">...but not in here.</div>

</div>

CSS

#moveInHere {
    with: 500px;
    height: 500px;
    border: 1px solid black;
    background: #eee;
}
#dragMe{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #eee;
}
#butNotHere{
    float: right; 
    with: 50px;
    height: 50px;
    border: 1px solid black;
    background: #aaa;
}

JavaScript

$("#dragMe").draggable({
    obstacle: "#butNotHere",
    preventCollision: true,
    containment: "#moveInHere"
});
$("#butNotHere").draggable({
    obstacle: "#dragMe",
    preventCollision: true,
    containment: "#moveInHere"
});