Jquery Image在第一次掉落后没有明显拖动

Question

我是一个jQuery新手，但我正在尝试模拟一个lightbox，其中页面上可能存在许多图像，并且我有“浮动”dropzone，用户可以将图像拖放到放下区域然后添加到灯箱。

灯箱由一个有两行和四个单元格的表组成，每个单元格中有一些div是dropzones。

我打算使用表格/单元格来调整图像的顺序（通过AJAX将其保存（除其他外）到服务器。）

我实际上是通过快照将图像居中，但我需要静态定位div以包含它。也许还有另一个解决方案，但在每种情况下，当我省略将位置/静态添加到draggable时，它不会将它放在容器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'))
         }
     });

拖入放置区域的图像可拖动到新的拖放区域，但第二次拖动的图像不会显示图像或div，但仍会正确拖放。如果我删除"$(this).append(ui.draggable.css('position', 'static'))“第二次拖动正常工作，但它不包含在保管箱中。

这是小提琴：fiddle