Multiple Droppable Problem

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css">
<div class="person" data-id="A">
  Person A (should select ALL it covers WHOLLY)
</div>
<div class="person" data-id="B">
  Person B (should select ALL it covers WHOLLY)
</div>

<div id="item_1" class="droppable" data-id="1">
  <input type='hidden' name='value_1' id='value_1' /> Item 1
</div>

<div id="item_2" class="droppable" data-id="2">
  <input type='hidden' name='value_2' id='value_2' /> Item 2
</div>

<div id="item_3" class="droppable" data-id="3">
  <input type='hidden' name='value_3' id='value_3' /> Item 3
</div>

<br/>

<div id="item_4" class="droppable" data-id="4">
  <input type='hidden' name='value_4' id='value_4' /> Item 4
</div>

<div id="item_5" class="droppable" data-id="5">
  <input type='hidden' name='value_5' id='value_5' /> Item 5
</div>

<div id="item_6" class="droppable" data-id="6">
  <input type='hidden' name='value_6' id='value_6' /> Item 6
</div>

CSS

.yellow {
  background-color: yellow;
}

.droppable {
  display: inline-block;
  margin: 30px 10px;
  width: 100px;
  height: 20px;
  padding: 3px;
  border: solid 1px red;
}

.person {
  display: block;
  width: 350px;
  height: 40px;
  border: solid 1px black;
}

JavaScript

(function($) {

    var _old = $.ui.intersect;

    $.ui.intersect = function(draggable, droppable, toleranceMode) {

      if (!droppable.offset) return false;

      var x1 = (draggable.positionAbs || draggable.position.absolute).left,
        x2 = x1 + draggable.helperProportions.width,
        y1 = (draggable.positionAbs || draggable.position.absolute).top,
        y2 = y1 + draggable.helperProportions.height;
      var l = droppable.offset.left,
        r = l + droppable.proportions.width,
        t = droppable.offset.top,
        b = t + droppable.proportions.height;

      switch (toleranceMode) {
        case 'fit':
          return (l <= x1 && x2 <= r && t <= y1 && y2 <= b);
          break;
        case 'cover':
        
          return (l >= x1 && x2 >= r && t >= y1 && y2 >= b);
          break;
        case 'intersect':
          return (l < x1 + (draggable.helperProportions.width / 2) // Right Half
            && x2 - (draggable.helperProportions.width / 2) < r // Left Half
            && t < y1 + (draggable.helperProportions.height / 2) // Bottom Half
            && y2 - (draggable.helperProportions.height / 2) < b); // Top Half
          break;
        case 'pointer':
          var draggableLeft = ((draggable.positionAbs || draggable.position.absolute).left + (draggable.clickOffset || draggable.offset.click).left),
            draggableTop = ((draggable.positionAbs || draggable.position.absolute).top + (draggable.clickOffset || draggable.offset.click).top),
            isOver = $.ui.isOver(draggableTop, draggableLeft, t, l, droppable.proportions.height, droppable.proportions.width);
          return isOver;
          break;
        case 'touch':
          return (
            (y1 >= t && y1 <= b) || // Top edge touching
            (y2 >= t && y2 <= b) || // Bottom edge touching
            (y1 < t && y2 > b) // Surrounded vertically
          ) && (
            (x1 >= l && x1 <= r) || // Left edge touching
            (x2 >= l && x2 <= r) || //...