jQuery를 사용하여 단일 draggable에 대해 다중 droppable 감지하기

Question

사람들을 항목으로 지정하려고합니다. 사용자가 항목을 모두 터치하거나 덮을 수있는 한 여러 항목을 가져올 수 있습니다. 이 경우 사람은 draggable이고 항목은 droppables입니다.

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/

문제는, drappable이 하나의 droppable에만 놓을 수있는 것입니다.

여러 개를 인식하고 올바르게 할당하려면 어떻게해야합니까?

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")); 
    } 
});