jquery - 最初のドロップ後にJquery Imageが目に見えてドラッグされない

Question

私はjQuery初心者ですがlightbox、ページに多数の画像が存在する可能性がある場所をシミュレートしようとしており、ユーザーが画像をドロップゾーンにドラッグアンドドロップしてから追加できる「フローティング」ドロップゾーンを持っていますライトボックス。

ライトボックスは、2 つの行と 4 つのセルを含むテーブルで構成され、各セル内にドロップゾーンである div があります。

テーブル/セルを使用して画像の順序を調整するつもりでした (画像は (特に) AJAX 経由でサーバーに保存されます)。

私は実際にスナップを介して画像を中央に配置しましたが、div静的に配置する必要があります。おそらくこれには別の解決策がありますが、いずれの場合も、位置/静的をドラッグ可能に追加することを省略すると、コンテナdivまたはテーブルセル内に配置されません:

         $(".dropboxes").droppable({  // recenter the image once dropped
         drop: function (event, ui) {
             //need to check if this exists first more logic to follow
             $(this).find("div").attr("class", "drag2").remove();
             $(this).append(ui.draggable.css('position', 'static'))
         }
     });

ドロップゾーンにドラッグされた画像は新しいドロップゾーンにドラッグできますが、2 回目のドラッグで画像が表示されないかdiv、正しくドロップされます。"を削除する"$(this).append(ui.draggable.css('position', 'static'))と、2 番目のドラッグは正しく機能しますが、ドロップボックスには含まれません。

これがフィドルです：フィドル