使用 jQuery 检测单个可拖动对象的多个可放置对象

Question

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

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>

CSS

 .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;
 }

JS

$('.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：https://jsfiddle.net/myingling/66pg1zr1/6/

问题是，似乎只能将可拖动对象拖放到单个可拖放对象上。

如何让它识别多个并正确分配？

Answer 1

查看可能对您有帮助的tolerance-选项：https://jsfiddle.net/kgaqb0ay/

$('.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"));
    }
});