多个放置位置 - 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
});

同样适用于可放置的。