Collision for draggables

by RichardGouw

HTML

<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>

CSS

.pin {
  width: 20px;
  height: 20px;
  background-color: #65C02F;
  margin: 7px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.2s;
}

.pin.placed.boundary {
  box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
}

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