多个放置位置 - JQueryUI

Question

所以我有多个 id="draggable" 的 JQuery 可拖动项目和多个 id="droppable" 的可放置项目。我希望每个可拖动项目都能够放入每个“可拖放”项目中。但是，使用代码我只有第一个可放置的项目被视为可接受的放置位置。以下是我的代码：

HTML：

<div id="draggable"> Drag 1 </div>
<div id="draggable"> Drag 2 </div>
<div id="draggable"> Drag 3 </div>
<div id="droppable"> Drop 1 </div>
<div id="droppable"> Drop 2 </div>
<div id="droppable"> Drop 3 </div>

JQuery:

$('#draggable').draggable({
    helper:"clone",
    containment:"document",
    zIndex: 100
});

$('#droppable').droppable({
    drop:function(event, ui) {
        ui.draggable.detach().appendTo($(this));
    }
});

Answer 1

将类添加到这些 div 中。 ID 必须是唯一的。

<div class="draggable"> Drag 1 </div>
<div class="draggable"> Drag 2 </div>
<div class="draggable"> Drag 3 </div>
<div class="droppable"> Drop 1 </div>
<div class="droppable"> Drop 2 </div>
<div class="droppable"> Drop 3 </div>

然后：

$('.draggable').draggable({
    helper:"clone",
    containment:"document",
    zIndex: 100
});

可放置的也一样。