I'm trying to implement something similar to a cart where you can drop items from a list. This items (<li> elements) has some elements inside (divs, span, and that stuff). The drag and drop itself works great. But the dragged element's image doesn't show its content in Webkit browsers.

My list element has a border an a background color. In Firefox, the image is the whole item. In Webkit browsers, only the dragged element without content. I see the background and border, but without text inside.

I tried to make a copy of the element and force it to be the image, but doesn't work.

var dt = ev.originalEvent.dataTransfer;
dt.setDragImage( $(ev.target).clone()[0], 0, 0);

I have a simplified example that exhibit the same behavior: http://jsfiddle.net/ksnJf/1/