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的代码？

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

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

从UL到DIV复制LI元素有example。

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>

我不知道它是一个bug还是故意的，但无论如何它在不同的浏览器中都是不一致的。我会问webkit小组。

谢谢！

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

2 个答案: