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

var intersect = $.ui.intersect = ( function() {
    	function isOverAxis( x, reference, size ) {
    		return ( x >= reference ) && ( x < ( reference + size ) );
    	}
    
    	return function( draggable, droppable, toleranceMode, event ) {
    
    		if ( !droppable.offset ) {
    			return false;
    		}
    
    		var x1 = ( draggable.positionAbs ||
    				draggable.position.absolute ).left + draggable.margins.left,
    			y1 = ( draggable.positionAbs ||
    				draggable.position.absolute ).top + draggable.margins.top,
    			x2 = x1 + draggable.helperProportions.width,
    			y2 = y1 + draggable.helperProportions.height,
    			l = droppable.offset.left,
    			t = droppable.offset.top,
    			r = l + droppable.proportions().width,
    			b = t + droppable.proportions().height;
            if (toleranceMode instanceof Function) {
    
                return toleranceMode(draggable, droppable, x1, x2, y1, y2, l, r, t, b);
    
            } else {
    		    switch ( toleranceMode ) {
    		        case "fit":
    			        return ( l <= x1 && x2 <= r && t <= y1 && y2 <= b );
    		        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
    		        case "pointer":
    			        return isOverAxis( event.pageY, t, droppable.proportions().height ) &&
    				isOverAxis( event.pageX, l, droppable.proportions().width );
    		        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 ) || // Right edge touching
    				( x1 <...