function detectCollisions(event, ui) {

  var $box1 = $("#box1");

  var $box2 = $("#box2");

​

  var r1 = elementRect($box1);

  var r2 = elementRect($box2);

​

  $box1.text("box1: " + rectAsText(r1));

  $box2.text("box2: " + rectAsText(r2));

  var minkowski = {

    left:   r1.left - r2.right,

    top:    r2.top - r1.bottom,

    width:  r1.width + r2.width,

    height: r1.height + r2.height,

    right:  r1.right - r2.left,

    bottom: r2.bottom - r1.top

  };

  var collision =

    minkowski.left <= 0 &&

    minkowski.right >= 0 &&

    minkowski.top <= 0 &&

    minkowski.bottom >= 0;

​

  $boxes = $("#box1,#box2");

  if (collision) {

    $boxes.addClass("collision");

  }

  else {

    $boxes.removeClass("collision");

  }

  $("#notes").html(

    "collision: " + collision +

    "<br/>minkowski: " +

    rectAsText(minkowski));

}

​

function elementRect($element) {

  var rect = {

    left:   $element.position().left,

    top:    $element.position().top,

    width:  $element.width(),

    height: $element.height()

  };

  rect.right  = rect.left + rect.width;

  rect.bottom = rect.top + rect.height;

​

  return rect;

}

​

function rectAsText(r) {

  return r.left + ", " +

         r.top + ", " +

         r.right + ", " +

         r.bottom;

}

​

$(function() {

  detectCollisions();

  $("#box1").draggable({

    drag: detectCollisions

  });

  $("#box2").draggable({

    drag: detectCollisions

  });

});