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

Posted 2023-05-08

【中文标题】使用 jQuery 检测单个可拖动对象的多个可放置对象

【英文标题】：Detecting multiple droppables for a single draggable using jQuery

【发布时间】：2018-03-13 02:09:38

【问题描述】：

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

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/

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

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

【参考方案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"));
    
);

【讨论】：

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