HTML5拖放：在Webkit浏览器中，拖动的元素内容丢失

Question

我正在尝试实现类似于购物车的功能，可以从列表中拖动项目。这些项目（`

`元素）内部有一些元素（如div、span等）。拖放本身很好用，但在Webkit浏览器中，被拖动的元素图像不显示其内容。

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

我尝试复制该元素并强制将其作为图像，但不起作用。

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

我有一个简化的例子展现了相同的行为：http://jsfiddle.net/ksnJf/1/。

- miguel.camba

Answer 1

使用 addElement 方法：

dt.addElement(this);

在dragstart事件中使用它。但要注意透明背景 :)

顺便问一下，为什么不使用示例1或甚至示例2的代码？

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

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

这里有一个涉及将UL中的LI元素复制到DIV中的示例。

- Lex

---

使用dt.addElement(this)时出现错误：对象#<a Clipboard>没有方法'addElement'。 我采用了不同于HTML5演示的方法，因为我真的很讨厌在没有jQuery的情况下编写JS。但是为了测试，我更改了示例以使用h5utils.js和addEvent函数，结果完全相同。我只看到边框和背景，没有内容。 我现在要去吃晚饭了，然后我将编辑HTML5演示文稿，在拖动的元素内添加div和span，以查看它是否在演示中起作用。 - miguel.camba

看一下拖放和复制的示例。 - Lex

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 组里询问。

谢谢！

- miguel.camba

---

我有一些消息。我意识到了真正的问题。Webkit不会显示拖动元素内部的任何浮动内容。因此，最终将浮动div更改为inline-block，并且一切都正常工作。 - miguel.camba