1

したがって、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));
    }
});
4

1 に答える 1

2

これらの 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
});

ドロップ可能なものについても同じです。

于 2013-09-12T18:42:18.013 に答える