Firefox 拖放 - 幽灵图像丢失答案

【问题标题】：Firefox Drag and Drop - Ghost Image MissingFirefox 拖放 - 幽灵图像丢失
【发布时间】：2013-04-01 09:42:20
【问题描述】：

在使用 HTML5 拖放的 FireFox 中似乎存在一个奇怪的问题。

在 Chrome / Safari 中，被拖动的 HTML 会生成一个幻影图像，但由于某种原因在 Firefox 中它似乎根本没有出现。

HTML sn-p:

<div class="task sortable" draggable="true">
    <input type="checkbox" draggable="false">

<div class="what" draggable="false">
Yet another
</div>

<div class="who" draggable="false">

</div>
</div>

jQuery dragstart 事件处理程序中的 JS Snippet：

  var target = $(e.target),
                index = this.$('.sortable').index(target);
            this.dragModel = this.collection.at(index);
            e.originalEvent.dataTransfer.effectAllowed = 'move';
            _.defer(_.bind(function() {
                target.after(placeHolderHtml);   
                target.hide(); 
            }, this));

你知道为什么 Firefox 不能工作吗？

【问题讨论】：

标签： javascript html firefox

【解决方案1】：

没关系，我发现了问题。

似乎 FF 需要在 dataTransfer 对象中设置某种形式的数据。

dataTransfer.setData('text', 'junk');

修复它。

【讨论】：

您可以接受自己的答案，让别人知道这个问题有答案。

【解决方案2】：

对于未来的调试器：

显然，负的 text-indent CSS 属性也会导致拖动图像在 Firefox 中消失（但在 Chrome/Safari 中不会）。

【讨论】：

在元素上放置translateZ（可能还有其他）变换也会导致这种情况。