#5129 closed bug (fixed)

Opened February 04, 2010 12:53PM UTC

Closed March 07, 2013 05:55PM UTC

Last modified March 07, 2013 05:55PM UTC

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

Reported by: zerxer Owned by: scottgonzalez
Priority: minor Milestone: 1.10.2
Component: ui.sortable Version: 1.7.2
Keywords: sortable image placeholder Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (7)

Changed February 04, 2010 12:55PM UTC by rdworth comment:1

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

http://jsbin.com/ayige/2

Changed October 03, 2012 05:00PM UTC by scottgonzalez comment:2

milestone: 1.next → 2.0.0

Changed November 06, 2012 01:37PM UTC by mikesherov comment:3

status: new → open

Changed March 07, 2013 03:45AM UTC by tj.vantoll comment:4

summary: sortable: using sortables on images causes placeholder issues → Sortable: Unable to use an image as a placeholder in Firefox

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?

Changed March 07, 2013 05:42PM UTC by scottgonzalez comment:5

owner: → scott.gonzalez
status: open → assigned

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

Changed March 07, 2013 05:55PM UTC by Scott González comment:6

resolution: → fixed
status: assigned → closed

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

Changed March 07, 2013 05:55PM UTC by scottgonzalez comment:7

milestone: 2.0.0 → 1.10.2