Jquery Ui Sortable showing broken image in IE8

Question

I have a query sortable collection of images, ie. the items is set to img (due to the fact it is in a tab control and is a horizontal list, cannot be sorted on the list items, I just can't get it to work), which works perfectly everywhere except for IE8 (even in standards compliance mode), where the placeholder shows a broken image. Is there any kind of CSS setting I can use to make the placeholder invisible in IE8. I have tried

visibility : hidden;

I have tried setting the

content : url(transparent.gif);

neither seeming to have any effect. What can I do to fix this? Any suggestions on how I can even examine what CSS is being shown, as in Dom Explorer (or whatever its called in the IE8 developer tools) I can't see the img because as soon as I let go of the mouse it disappears and Dom Explorer doesn't seem to do real time updating the way Firebug does.

Edit: Here is the probelm duplicated http://jsbin.com/irozu

I over simplified my example, the other problem is that the whole tab is scrollable, controlled by slider. Changing

display : inline;

to

float : left;

doesn't work as we no longer have a scrollable list of items. Also for some strange reason, when there is a scrollbar and you use "li" instead of "img" as the target, the sortable stops working.

The updated example is at: http://jsbin.com/ahawi.

Answer 1

where the placeholder shows a broken image. Is there any kind of CSS setting I can use to make the placeholder invisible in IE8. I have tried

the broken image appears because jQuery UI creates (in your case) an IMG element without src attribute set for a placeholder. To solve this problem:

1. don't set the placeholder option or

2. change your .showPlace class to something like

   .showPlace {
      margin: 20px;
      overflow: hidden;
      width: 0; height: 0;
   }
   

the code above will hide the (non-existing) image content, but will leave the element visible.

BTW. in my test-case, setting visibility: hidden to .showPlace also worked well

Answer 2

If you do not want to show a placeholder, make sure that you do not set the sortable's placeholder option.

I see no problem with the default sortable behaviour in IE8. I've tried to recreate what you described in this hosted example: http://jsbin.com/osobu (The sortable images are in the third tab.)

It would be helpful if you provided more code or just edit the sample I provided (via http://jsbin.com/osobu/edit) in order to duplicate the problem.

Edit

In response to your comment, you can just set the items option to "li" and the problem is fixed. Also, I have to you use

#images li { float: left; }

instead of

#images li { display: inline: }

or else the image will be offset while you are dragging it.

Here is the fixed demo: http://jsbin.com/osezu

Answer 3

I fixed it up and reduced the code quite a bit.

Main problem was you were setting the DIV sortable rather than the UL

Seems to work just the way you want it : http://jsbin.com/egiwu

Answer 4

You could try: display: none;.

Answer 5

Here's another workaround:

$('.mysortthings').sortable({
  start: function(event,ui) {
        $('.ui-sortable-placeholder').each( function() {
           this.setAttribute('src','/ico/unipixel.gif'); } );
       }
});

In other words, set a start event handler, which sets the 'src' attribute of the placeholder img, as soon as things get going.