可拖动元素在悬停在另一个可拖动元素之上时消失

So here goes, I've been working on this for a bit now and am perplexed. I have two containers that are div's. Each container has the ability to drag and drop from or to the other container an element. The bottom most container has three drag and drop elements from the get go. These three elements are .jpg images. They formerly were .bmp images but I thought that may have been causing an issue so tried a different image type, the .jpg type. I am able to drag the three images back and fourth fine and in varying assortments. The problem is that when I drag and drop an image on top of another image that is also drag and drop capable the image being dragged and dropped disappears. I've moved the image that seems to be hiding the other image up or down to see if it was just superimposed on top. That isn't the case. It's as if the image disappears. I've used Firefoxe's "Inspect element" option to view the html/java code and see no errors when dragging or dropping. All seems to respond as it should. That being said, when I was in the console section of the debugging screen I enabled all checks and did see something interesting. When I dragged and dropped an image on top of another image it would log a "reflow: 0.4s". I did some further researching and as I understand it a reflow is the browsers' way of calculating a change in layout. That obviously tells me that there is a change occurring but I can't tell what code is running to hide or cause the dragged and dropped image to disappear. I also noticed that the image disappearing only disappears if the mouse is hovering over the image to be dropped on. If the mouse is off the image yet the image being dragged still hovers partially over the bottom image it wont disappear. Rather, once dropped the image being dropped properly nests between or to the side of the respective images. Please see the bellow code to get a better idea. Any advice would be great!!So here goes, I've been working on this for a b