CODEWITHSUNDEEP
javascripthtmlfirefox
adrian
adrian

Reputation: 2376

Firefox Drag and Drop - Ghost Image Missing

It appears there is a strange issue in FireFox using HTML5 drag and drop.

In Chrome / Safari, a ghost image is generate of the HTML being dragged, but for some reason in Firefox it dosen't seem to be appearing at all.

HTML snippet:

<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>

JS Snippet within a jQuery dragstart event handler:

  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));

Any ideas why Firefox would not work?

Upvotes: 3

Views: 1942

Answers (2)

ansorensen
ansorensen

Reputation: 1316

For future debuggers:

Apparently, a negative text-indent CSS property can also cause the drag image to disappear in Firefox (but not in Chrome/Safari).

Upvotes: 0

adrian
adrian

Reputation: 2376

Never mind I figured out the problem.

It seems FF requires some form of data to be set in the dataTransfer object.

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

Fixes it.

Upvotes: 5

Related Questions