z-index not working in IE8 with the sortable jQuery plugin

Question

I'm working with the jQuery Sortable plugin to drag and drop images from one box to another box. This works fine in ff,chrome and safari but it fails in IE8. It seems that when you start dragging that the image is send to the back. I've tried to solve this by adding the z-index option to the sortable plugin, i've tried appending it to a node higher in the hierarchy (body). It appears that setting a z-index on every other item in the page would fix this, haven't tried it yet and i'm not planning on doing this because this would mess up alot.

So the user can drag an image from 1 gallery to the next gallery screenshot of how it should work: http://img69.imageshack.us/i/draganddrop.jpg/

Some html:

    <!--SECOND ARROCRDION ITEM -->
    <a class="flickr_accordeon_header" id="flickr_second_header" href="javascript:;">__MSG__SEARCH_FOR_PHOTOS__</a>
    <div>
        <p class ="flickr_text" > __MSG__SEARCH_FOR_PHOTOS__</p>
        <form method="GET" action="javascript:;">
            <p>
                <input type="text" value="__MSG__SEARCH__" id="flickr_key_input" class="flickr_changeColorNormal" />
                <button class="s3d-button flickr_search" id="flickr_seach_button">
                    <span class="s3d-button-inner" >__MSG__SEARCH__</span>
                </button>
                <img src="/devwidgets/flickr/images/ajax-loader-gray.gif" alt="__MSG__LOADING_IMAGE__" id="flickr_loading_img" />
                <a href="javascript:;" id="flickr_refresh_key_button"><img src="/dev/_images/recent_activity_icon.png" alt="refresh" title='refresh' /></a>
            </p>
        </form>

        <div id="flickr_input_error">__MSG__INPUT_ERROR__</div>
        <div id="flickr_input_same_error">__MSG__INPUT_SAME_ERROR__</div>
        **<div id="flickr_key_gallery" ><ul class="flickr_key_ul"><li></li></ul></div>**
        <div id="flickr_key_pagging" ></div>
    </div>
</div>

<!--SLIDING SIDEBAR -->
<div id="flickr_sidebar" class="jcarousel-skin-tango">
    <div id="flickr_side_paging"></div>
    **<ul>
         <li><img src="/devwidgets/flickr/images/drop-image.png" alt="__MSG__DROP_HERE__" class="flick_drop_here"></li>
    </ul>**
</div>

The images get rendered into the ul, so basically it's just an ul with li's with images

javascript for sortable:

horizontal: {
            helper: "clone", // Instead of dragging the real image a copy will be dragged
            connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected
            cursor: 'pointer', //change the cursor when dragging
            opacity: 0.50, //Change the opacity while dragging
            appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped
            containment: 'body', //Make sure the user can't drag the images outside the widget
            revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position
            zIndex: 9999
        }

I've tried it with setting the dragged image to absolute and the container on relative... doesn't work

Anyone know how to solve this in IE8 ?

Answer 1

Apparently it had nothing to do with the z-index. This 1line messed up everything : opacity: 0.50

Answer 2

Thank you sooooooo much for your answer! it has been very useful for the application we are developing, you're helped us a lot :) ..a lot of days wasted, just for a capricious behavior of IE ¬¬ damm it! greetings from Barcelona, Angel

Answer 3

Thank you very much indeed. You've helped me a lot with a serious bug.