z-index not working in IE8 with the sortable jQuery plugin
- by Ojtwist
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 ?
