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

Question

我正在尝试实现类似于购物车的功能，您可以在其中从列表中删除物品。 这个项目（<li> 元素）里面有一些元素（div、span 和那些东西）。 拖放本身效果很好。但是被拖动元素的图像在 Webkit 浏览器中不显示其内容。

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

我试图复制元素并强制它成为图像，但不起作用。

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

我有一个表现相同行为的简化示例：http://jsfiddle.net/ksnJf/1/

Answer 1

使用addElement:

dt.addElement(this);

而不是在 dragstart 事件中。但要注意透明背景:)

顺便说一句，你为什么不使用来自example 1 甚至example 2 的代码？

更新： 对于 Webkit 需要使用 webkitUserDrag 属性或等效的 CSS

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

有一个example 将 LI 元素从 UL 复制到 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群问问。

谢谢！