Javascript 使用jQuery检测单个可拖动设备的多个可拖放设备

我试着给人们分配物品，只要他们能触摸/覆盖所有物品，人们就可以拿走多个物品。在这种情况下，此人是可拖动的，而项目是可拖放的

HTML

<div class="person" data-id="A">Person A</div>
<div class="person" data-id="B">Person B</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>

JS

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

$('.person').draggable();
$('.droppable').droppable({
        hoverClass : "yellow",
    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"));
    }
});

jsFiddle:

问题是，看起来一个可拖放设备只能放在一个可拖放设备上

如何使其识别多个并正确分配？

请查看-选项，该选项可能会帮助您：

---

这对任何触摸都有效，但如果我只想完全覆盖，为什么这不起作用？

$('.droppable').droppable({
    hoverClass : "yellow",
    tolerance: "touch",
    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"));
    }
});