JSFiddle - React, Tailwind, and code Playground

by Janine Lanting

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 class=" dragMe dragMeCSS">Drag me...</div>

    <div class="dragMe dragMeCSS">...but not in here.</div>

</div>

CSS

#moveInHere {
    with: 500px;
    height: 500px;
    border: 1px solid black;
    background: #eee;
}
.dragMeCSS{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #eee;
}
.obstacle{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #eee;
}

JavaScript

$(".dragMe").draggable({
start: function( event, ui ) {
         $(this).removeClass('dragMe'); 
     },
     stop: function( event, ui ) {
         $(this).addClass('dragMe'); 
     },
    obstacle: ".dragMe",
    preventCollision: true,
    containment: "#moveInHere"
});



// 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...