drag'n'drop + zindex

drag'n'drop + zindex

Hi,
I'm trying to figure out how to set zindex at a draggable element, in my case all the element with class items will be draggable but when I move them out of sliderGallery div they are going behind the other divs, for example droparea div, I need that draggable items are always above all the page elements. I tried in this way, but it does not work.
Any hint?

javscript
$(document).ready(function(){   
   $(".items").draggable({helper: 'clone', zIndex: 200 });
}

html
        <div class="sliderGallery">
            <ul>
                <li><span class="items" id="1"><img class="pb-airportexpress" src="images/pb_airport_express.jpg" /></span></li>
                <li><span class="items" id="2"><img src="images/pb_airport_extreme.jpg" /></span></li>
                <li><span class="items" id="3"><img src="images/pb_timecapsule_20080115.jpg" /></span></li>
                <li><span class="items" id="4"><img src="images/pb_keyboards20070807.jpg" /></span></li>
                <li><span class="items" id="5"><img src="images/pb_mighty_mouse.jpg" /></span></li>               
            </ul>
           
        </div>
<div class="droparea" id="droparea">&nbsp;</div>

css
.sliderGallery {
    overflow: hidden;
    position: relative;
    padding: 10px;
    height: 160px;
    border: 2px solid #CCCCCC;
    margin-bottom:10px;
}

.sliderGallery UL {
    position: absolute;
    list-style: none;
    overflow: none;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

.sliderGallery UL LI {
    display: inline;
}

/* DROPAREA */
.droparea {
   margin-top:10px;
   margin-bottom:10px;
   background-color: #CCCCCC;
   border: 1px solid #AAAAAA;
   min-height: 200px;
}     

.items {
}