jQuery: overlaps

more at: http://stackoverflow.com/a/4230951/1250044 http://stackoverflow.com/a/2209953/1250044 http://stackoverflow.com/a/5599301/1250044 http://upshots.org/javascript/jquery-hittestobject https://gist.github.com/4172715 https://gist.github.com/3749352

by Ryan Brackett

HTML

<div id="area">
  <div id="box0" class="over"></div>
  <div class="drop" id="box1">1</div>
  <div class="drop" id="box2">2</div>
  <div class="drop" id="box3">3</div>
  <div class="drop" id="box4">4</div>
</div>

<div id="state"></div>

CSS

body {
  padding: 30px;
  color: #444;
  font-family: Arial, sans-serif;
}

#area {
  height: 400px;
  position: relative;
}

#area>div {
  background-color: rgba(122, 122, 122, 0.3);
  position: absolute;
  text-align: center;
  font-size: 50px;
  width: 60px;
  height: 60px;
}

.over {
  background-color: rgba(255, 0, 0, 0.5) !important;
}

#box0 {
  top: 150px;
  left: 45%;
  z-index: 1;
}

#box1 {
  top: 260px;
  left: 50px;
}

#box2 {
  top: 110px;
  left: 160px;
}

#box3 {
  top: 200px;
  left: 200px;
}

#box4 {
  top: 50px;
  left: 400px;
}

JavaScript

;
(function($, window, document, undefined) {

  var defaults = {
    onDrag: function(event, elem) {},
    onMove: function(event, elem) {},
    onDrop: function(event, elem) {}
  };

  $.fn.drag = function(options) {

    options = $.extend({}, defaults, options);

    return this.each(function() {
      var doc = $(document),
        elem = $(this),
        offset = null;

      var start = function(e) {
        var pos = elem.offset();
        offset = {
          x: e.pageX - (parseInt(elem.css('left')) || 0),
          y: e.pageY - (parseInt(elem.css('top')) || 0)
        };

        options.onDrag(e, elem);
        doc.on("mousemove.draggable", moveMe);
        doc.on("mouseup", end);

        e.preventDefault();
      };

      var moveMe = function(e) {
        elem.stop().css({
          top: e.pageY - offset.y,
          left: e.pageX - offset.x
        });
        options.onMove(e, elem);
      };

      var end = function(e) {
        options.onDrop(e, elem);
        doc.off("mousemove", moveMe);
      };

      elem.on("mousedown", start);
    });
  };
}(window.jQuery || window.Zepto, window, document));



// http://stackoverflow.com/a/4230951/1250044
var overlaps = (function() {
  var getPositions = function(elem) {
    var pos = $(elem).position(),
      width = $(elem).width(),
      height = $(elem).height();
    return [
      [pos.left, pos.left + width],
      [pos.top, pos.top + height]
    ];
  };

  var comparePositions = function(p1, p2) {
    var r1 = p1[0] < p2[0] ? p1 : p2,
      r2 = p1[0] < p2[0] ? p2 : p1;
    return r1[1] > r2[0] || r1[0] === r2[0];
  };

  return function(a, b) {
    var pos1 = getPositions(a),
      pos2 = getPositions(b);
    return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
  };
})();



// http://stackoverflow.com/a/2209953/1250044
function findIntersectors(targetSelector, intersectorsSelector) {
  var intersectors = [],
    $target = $(targetSelector),
    tAxis =...