Draggables going behind other elements

Draggables going behind other elements


Hi all Devs,
We are in the process of converting a web application from using
Interface to using UI, but have come across a strange bug (or more!).
We have two DIV's (call them Source and Target). Source has CSS
overflow:auto - to provide scrolling, and CSS position: absolute.
Target has CSS position:absolute, and is defined as Droppable. The
source has various div's in it that are set to draggable.
The problem comes when dragging the divs out of the Source - they will
not do so (in Firefox2, Opera9 and IE6).
If we have only the CSS on the Source of either pos:abs OR
overflow:auto then it works - but NOT with both. This used to work
fine in Interface.
Another problem lies with the Target div having pos:abs - Dragged
items go Behind the Target (FF2,IE6 - Ok in OP9!)
We've also noticed that if trying to drag from the Source once it has
been scrolled by any amount - the Draggable helper is offset (by the
scroll amount) (This goes really bad in Opera!)
Has anyone come across a similar set of problems before? Are there
workarounds? Are there Fixes?? Should Tickets be raised? Or should
we stick with the old Interface :-( ?
We're using jQuery.1.2.1 and all the latest released (non-cvs) UI
code. No other plugins involved.
Example source code below:
<html>
<head>
<script src="js/jquery-1.2.1.pack.js"></script>
<script src="js/jquery.ui-1.0/ui.mouse.js"></script>
<script src="js/jquery.ui-1.0/ui.draggable.js"></script>
<script>
$(document).ready(function(){
$(".block").draggable({
    containment: 'document',
    helper: 'clone',
    opacity: 0.70,
    zIndex:10000
});
});
</script>
<style>
    .block
    {
        border: 2px solid #0090DF;
        background-color: #68BFEF;
        width: 150px;
        height: 70px;
        margin: 10px;
    }
    .source_d
    {
        width:500px;
        height:500px;
        border:2px solid red;
        position:absolute;
        overflow:auto;
    }
    #target_d
    {
        position:absolute;
        left:600px;
        width:300px;
        height:300px;
        background-color:#EEE;
        z-index: 10;
    }
    </style>
</head>
<body>
<table width="800"><tr><td width="500">
    <div class="source_d">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</td><td>
    <div id='target_d'></div>
</td>
</tr></table>
</body>
</html>