Javascript HTML5拖放；drop:Webkit浏览器中缺少拖动的元素内容

我正在尝试实现类似于购物车的功能，您可以从列表中删除项目。 此项（

元素）中包含一些元素（div、span等）。 拖放本身工作得很好。但是被拖动元素的图像在Webkit浏览器中不显示其内容

我的列表元素有一个边框和一个背景色。在Firefox中，图像是整个项目。在Webkit浏览器中，只有被拖动的元素没有内容。我看到了背景和边框，但里面没有文字

我试图复制元素并强制它成为图像，但没有成功

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

我有一个显示相同行为的简化示例：

使用：

而是在dragstart事件中。但请注意透明背景：）

顺便说一句，为什么您不使用来自或甚至来自的代码

UPD： 对于Webkit，需要使用属性或等效CSS

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

---

有一种将LI元素从UL复制到DIV的方法。

我刚刚测试过。它起作用了！但是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>

Agua矿物
1.50€

这并不重要

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

Agua矿物
1.50€

我不知道这是一个bug还是故意的，但不管怎样，它在不同的浏览器中是不一致的。我将询问webkit组

---

谢谢

使用dt.addElement（this）我得到了一个错误：Object#没有“addElement”方法。我使用了一种不同于html5演示的方法，因为我真的不喜欢在没有jQuery的情况下编写JS。但是为了进行测试，我将示例更改为使用h5utils.js和addEvent函数，结果相同。我只看到边界和背景，但没有内容。我现在就去diner，我将编辑html5演示，在Draged元素中添加div和span，看看它在演示中的效果。看看DragandCopy的例子。我有一些消息。我已经意识到真正的问题。Webkit在拖动的元素中不显示任何浮动内容。所以，最后，将float divs更改为inline block，一切正常。

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