Sortable: Unable to use an image as a placeholder in Firefox

[zerxer]

From ​http://forum.jquery.com/topic/using-sortables-on-images-causes-placeholder-issues

Basically, see here: ​http://jsbin.com/ayige

Firefox (and possibly some other browsers?) do not let you style an empty IMG tag with a width/height, so there's a broken placeholder under your sortable. Chrome seems to do just fine though and apply the width/height to the image.

I've fixed this on my site once already in the past (forgot to report this), but noticed it pop up again when I updated to the latest files. My fix was basically to put ".attr('src', 'url to a spacer gif')" in the _createPlaceholder function where it defines the "f" variable in the e.placeholder.element function.

[rdworth]

Another workaround would be to set display: inline-block in the css for ui-sortable-placeholder. See

​http://jsbin.com/ayige/2

[tj.vantoll]

Confirmed this is still an issue on 1.10.1: ​http://jsbin.com/ayige/15. Adding img.ui-sortable-placeholder { display: inline-block; } fixes this.

I think we should either land that or close this as wontfix since this is a bit of an edge case that's easy to workaround. I'm leaning towards putting something in to handle this. Thoughts?

[Scott González]

I think the ideal fix is setting the src to match the item being sorted.

[Scott González]

Sortable: Copy the src of the original item when creating a placeholder from an image. Fixes #5129 - Sortable: Unable to use an image as a placeholder in Firefox.

Changeset: b9be6bb7ad107fd48b28e31df972b2037c47c2cb