KineticJS Colliding Rects

http://stackoverflow.com/questions/24613135/

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.js"></script>
<div id="stage-container">
  canvas goes here!
</div>

CSS

body { background-color: black; color: white; }
#stage-container { width:200px; background-color: grey; }

JavaScript

var stage = new Kinetic.Stage({
  container: 'stage-container',
  width: 200,
  height: 200
});

var layer = new Kinetic.Layer();

var taurusImg = new Kinetic.Rect({
  x: 40,
  y: 40,
  width: 20,
  height: 40,
  fill: 'blue',
  opacity: 0.5,
  id: 'taurus',
  name: 'image',
  draggable: true
});

var truckImg = new Kinetic.Rect({
  x: 40,
  y: 100,
  width: 100,
  height: 40,
  fill: 'green',
  opacity: 0.5,
  id: 'truck',
  name: 'image',
  draggable: true
});

layer.add(taurusImg)
layer.add(truckImg);

var totalImages = 6;
for (var i=0; i<totalImages-2; i++) {
  var img = new Kinetic.Rect({
    x: 42 * i,
    y: 2,
    width: 40,
    height: 40,
    fill: 'grey',
    opacity: 0.5,
    name: 'image',
    draggable: true
  });
  
  layer.add(img);
}

layer.find('.image').on('dragstart', function() {
  this.moveToTop();
});

layer.find('.image').on('dragmove', function() {
  detectCollisions();
});

function detectCollisions() {
  var images = layer.find('.image');
  images.stroke(null);
  
  for (var i=0; i<images.length; i++) {
    for (var j=i+1; j<images.length; j++) {
      if ( rectanglesOverlap(images[i], images[j]) ) {
        images[i].stroke('red');
        images[j].stroke('red');
      }
    }
  }
}

function rectanglesOverlap(r1, r2) {
  return (r1.x() < r2.x() + r2.width() &&
    r1.x() + r1.width() > r2.x() &&
    r1.y() < r2.y() + r2.height() &&
    r1.y() + r1.height() > r2.y());
}

detectCollisions();
stage.add(layer);
layer.draw();