Jquery Image not visibly dragging after first drop

Question

I'm a jQuery neophyte but I'm trying to simulate a lightbox where a number of images may exist on a page and have I have "floating" dropzone where the user can drag and drop images to the drop zone which are then added to the lightbox.

The lightbox consists of a table with two rows and 4 cells, there are divs within each cell that are dropzones.

I was going to use the table/cells to adjust the order of the images (which will be saved (among other things) via AJAX to the server.)

I have actually centered the image via snap but I need to position the div statically to be contained. Perhaps there's another solution to this but in each case when I omit adding the position/static to the draggable it will not position it within the container divs or table cells:

         $(".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'))
         }
     });

The image that is dragged into the dropzone is draggable to a new drop zone, however the image on the second drag will not show the image or div but it will still drop correctly. If I remove "$(this).append(ui.draggable.css('position', 'static'))" the second drag works correctly but it's not contained within the dropbox.

Here's the fiddle: fiddle