javascript - Firefox 拖放 - 幽灵图像丢失

Question

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

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

HTML 片段：

<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 不起作用？

Answer 1

没关系，我发现了问题。

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

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

修复它。

Answer 2

对于未来的调试器：

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