HTML5 drag and drop: drag-and-drop content not found in Webkit browsers

Question

I am trying to implement something similar to a recycle bin in which you can remove items from a list. These elements <li>have some elements inside (divs, span, etc.). Drag and drop itself works great. But the image with the dragged item does not display its contents in Webkit browsers.

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

I tried to make a copy of the element and make it be an image, but it does not work.

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

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

Answer 1

Use addElement :

dt.addElement(this);

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

By the way, why don't you use the code from example 1 or even example 2 ?

UPD: For Webkit, you must use the 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

. ! JS, , . . .

<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>

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

, , . webkit.

!