Multiple Droppable Problem

by Michael Yingling

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

$('.person').draggable();
$('.droppable').droppable({
		hoverClass : "yellow",
    tolerance: "intersect",
    drop: function(event, ui) {
    	$("#value_"+$(this).data("id")).val(ui.draggable.data("id"));
      console.log("Item "+$(this).data("id")+" taken by "+ui.draggable.data("id"));
    }
});