jquery - JQuery - 各 Droppable は、1 つの Draggable のみを受け入れる必要があります

Question

JQuery - Draggable/Droppable に問題があります。私はグーグルで検索しており、このフォーラムも検索しました。問題はある程度解決されましたが、まだ望ましくない結果につながる状況があります。

このスレッドでいくつかの回答を進めました: jQuery UI - Droppable only accept one draggable。

したがって、私の使命は基本的に、1 つのドラッグ可能なアイテムだけがドロップ可能なアイテムに着陸できるドラッグ アンド ドロップ システムを持つことです。まず、Draggables が既に配置されている場合は、それらの Droppables がビジーであることを設定する必要があります。そのために create 関数を使用しました。

ここにいくつかのコードがあります：

$('.droppable').droppable
({
    hoverClass: "ui-state-active",
    drop: function (event, ui) {
    $(this).droppable('option', 'accept', ui.draggable);
    },
    out: function (event, ui) {
        $(this).droppable('option', 'accept', '.draggable');
    },
    create: function (event, ui) {
        if ($(this).find('.draggable').length == 1) {
            $(this).droppable('option', 'accept', $(this).find('.draggable'));
        }
    },
});


$('.draggable').draggable
({
    revert: 'invalid',
    cursor: 'move',
    zIndex: 10000
});

私の問題: ユーザーがアイテムをドラッグして、受け入れ可能な Droppable に配置できなかった場合、元に戻ります。これは、ドロップされておらず、drop: 関数が実行されないことを意味します。つまり、この Droppable は、ドラッグ可能なクラスの各アイテム (元に戻されたアイテム) があっても受け入れるようになりました。これについて何ができますか？ここで私が言いたいことを理解していただければ幸いです。

私は今すべてをやったといいのですが、そうでない場合はお知らせください.

ありがとう！