HTML5拖放：Webkit浏览器中缺少拖动的元素内容

Question

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/

Answer 1

Use addElement :

dt.addElement(this);

instead in the dragstart event. But beware transparent background :)

BTW, why would you don't use code from example 1 or even example 2 ?

UPD: For Webkit need to use webkitUserDrag property or equivalent CSS

-webkit-user-drag: element; 
-webkit-user-select:none;

There is an example of copying LI elements from UL to DIV.

Answer 2

I've just test it. It works! But all code in the JS, i have tested in any way or another, and didn't work for me. And then, I saw the difference. The used as a wrapper do the magic. This works

<li draggable="true" class="course" data-id="1">
    <div class="content">
      <div class="name">Agua Mineral</div>
      <div class="price">1.50</div>€
    </div>
</li>

This doesn't

<li draggable="true" class="course" data-id="1">
      <div class="name">Agua Mineral</div>
      <div class="price">1.50</div>€
</li>

I don't know if its a bug or its intentional, but anyway it's inconsistent in different browsers. I'll ask on webkit group.

Thanks!