jquery - 画像が既にドロップされている場合、画像のドロップを無効にしますか?

Question

動的に作成された画像のリストから画像をドラッグしたい 2 つの div タグがあります。しかし、別の画像を同じ div にドラッグするように制限したい。

div が既にドロップされている場合、ドロップを無効にしますか?

Jamiec の回答で説明されている方法を使用しました。

しかし、解決できないエラーが発生した問題があります

キャッチされていない TypeError: 未定義のプロパティ 'originalPosition' を設定できません

誰かがこのエラーを取り除くのを手伝ってください。

Answer 1

オプション1

デモを確認してください。ドロップ可能にドロップされた要素が既に存在する場合、要素は常に元の位置に戻ります。

$('#target').droppable({
    accept: ".dragme",
    drop: function(event, ui) {
       ui.draggable.addClass('dropped');
       ui.draggable.draggable( "disable" );
      $('#target').droppable( "option", "accept", "" );
    }
});

$('.dragme').draggable({
    revert : 'invalid'
});

デモ

オプション: #2

別のデモでは、新しい要素がドロップされると、既存のドロップされた要素が元の位置に戻ります。

var droppedObj = null;
$('#target').droppable({
    accept: ".dragme",
    drop: function (event, ui) {
        if(droppedObj !== null) {
            droppedObj.animate({ left: '0px', top : '0px', opacity : 1 }, 200).removeClass('dropped');
            droppedObj.draggable("enable");
        }
        droppedObj = ui.draggable;
        ui.draggable.addClass('dropped').draggable("disable");
    }
});

$('.dragme').draggable({
    revert: 'invalid'
});

デモ