jquery-ui-sortable - ドラッグ中のjquery uiソート可能な一時要素の交換

Question

サイズが制限されたjquery uiのソート可能なリストに一時的なドラッグ置換を実装する必要があります。

私は2つのソート可能なリストを持っています:

• 1 つの要素を保持する場所が 1 つだけの「スロット」
• ユーザーが「スロット」を埋めるために選択できるいくつかの要素を保持する「バケット」

ユーザーは、要素をバケットからスロットにドラッグする必要があります。ユーザーがスロットの上にマウスを置いて要素を保持しているときに、スロットがすでに使用されている場合は、現在のスロット要素をバケットに移動して、ドラッグした要素のためのスペースを視覚的に作成する必要があります。次に、ユーザーには 2 つのオプションがあります。

• ユーザーが新しい要素をドロップした場合: 新しい要素をスロットに挿入します。
• ユーザーがドロップをキャンセルした場合: 以前にスロットに入れられた要素をスロットに戻します (元のように)。

この動作は、ユーザーがドラッグをキャンセルするか、要素をスロットまたはバケットにドロップするまで繰り返されます。

スロットを 1 つの要素に視覚的に制限するために、スロットを 1 つの要素の正確な高さに制限し、オーバーフローを非表示に設定しました。

残念ながら、スロットに常に 1 つの要素を保持しながら効果を生み出すことはできませんでした。

編集1：これは私がこれまでに持っているものの例です

$(".slot").bind("sortchange", function (event, ui) {
    var slot = $(event.target);
    var bucket = $(".bucket");

    // Move any element already in the slot (other than the currently
    // dragged element) into the bucket
    var slotElements = slot.children(".item").not(ui.item);
    if (slotElements.length > 0) {
        for (var idx = 0; idx < slotElements.length; idx += 1) {
            var element = $(slotElements[idx]);
            moveAnimate(element, bucket);
        }
    }
});