Overriding or setting the drag image using setDragImage shouldn't be translucent for elements




Drag and Drop
9 years ago
2 years ago


(Reporter: Sebastian Markbåge, Unassigned)


Windows Vista
Bug Flags:
wanted1.9.2 ?
wanted1.9.1 ?

Firefox Tracking Flags

(Not tracked)




9 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv: Gecko/2009021910 Firefox/3.0.7 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3

Safari on Mac makes the drag image translucent if an Image is used but not if an element is used. It's more useful to make it opaque. Firefox should do the same.

Reproducible: Always

Steps to Reproduce:
Start a drag operation and use event.dataTransfer.setDragImage(element, 0, 0) to set the drag image to an instance of an element in your document.
Actual Results:  
A translucent image is displayed by the cursor during the drag operation.

Expected Results:  
It should have been opaque.

There are common drag and drop operation that may need to be opaque. It's up to the designer to make that call, not the browser.

You can always make an element more translucent by setting the opacity, but you can never make it more opaque. Therefore the default value should be opaque if the default drag image is overridden.


9 years ago
Flags: wanted1.9.2?
Flags: wanted1.9.1?

Comment 1

4 years ago
Additionally, it shouldn't be 50% the size either.

Chrome/Safari both do the translucent style too, but they at least keep the element the right size.

Comment 2

3 years ago
Please stop involuntarily transforming the size or opacity. This is awful. :(

It severely reduces the freedom of developers to manage the drag-and-drop experience.

Comment 3

3 years ago
I can see why Firefox would want to mimic the appearance of native OS drag-and-drop. Ideally, we would have a :drag pseudo-class to control the appearance of dragged elements. An internal browser stylesheet would set the CSS mask to an SVG document defining an opacity gradient, and the web developer could set mask:none to get a solid drag image.


3 years ago
See Also: → bug 941858
You need to log in before you can comment on or make changes to this bug.