JSFiddle - React, Tailwind, and code Playground

HTML

<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

// Scroll way down to the bottom to see the example javascript

// jquery-collision.min.js 1.0.2
(function($){function CollisionCoords(proto,containment)
{if(!proto)
{this.x1=this.y1=this.x2=this.y2=0;this.proto=null;}
else if("offset"in proto)
{var d=proto.data("jquery-collision-coordinates");if(d)
{this.x1=d.x1;this.y1=d.y1;this.x2=d.x2;this.y2=d.y2;}
else if(containment&&containment.length&&containment.length>=4)
{this.x1=containment[0];this.y1=containment[1];this.x2=containment[2]+proto.outerWidth(true);this.y2=containment[3]+proto.outerHeight(true);}
else if(proto.parent().length<=0)
{this.x1=parseInt(proto.css("left"))||0;this.y1=parseInt(proto.css("top"))||0;this.x2=parseInt(proto.css("width"))||0;this.y2=parseInt(proto.css("height"))||0;this.x2+=this.x1;this.x2+=(parseInt(proto.css("margin-left"))||0)+(parseInt(proto.css("border-left"))||0)+(parseInt(proto.css("padding-left"))||0)+
(parseInt(proto.css("padding-right"))||0)+(parseInt(proto.css("border-right"))||0)+(parseInt(proto.css("margin-right"))||0);this.y2+=this.y1;this.y2+=(parseInt(proto.css("margin-top"))||0)+(parseInt(proto.css("border-top"))||0)+(parseInt(proto.css("padding-top"))||0)+
(parseInt(proto.css("padding-bottom"))||0)+(parseInt(proto.css("border-bottom"))||0)+(parseInt(proto.css("margin-bottom"))||0);}
else
{var o=proto.offset();this.x1=o.left-(parseInt(proto.css("margin-left"))||0);this.y1=o.top-(parseInt(proto.css("margin-top"))||0);this.x2=this.x1+proto.outerWidth(true);this.y2=this.y1+proto.outerHeight(true);}
this.proto=proto;}
else if("x1"in proto)
{this.x1=proto.x1;this.y1=proto.y1;this.x2=proto.x2;this.y2=proto.y2;this.proto=proto;}
if("dir"in proto)
{this.dir=proto.dir;}}
CollisionCoords.prototype.innerContainer=function()
{var clone=new...