draggable, scrolling inside div with overflow:auto

draggable, scrolling inside div with overflow:auto


Hi,
I have a div with overflow:auto with draggable elements. Now, when I
drag an item, the div does not scroll when dragging elements around in
FF, IE and Safari. How can scrolling be activated?
jquery 1.2.2
<html>
<head>
<script src="../src/jscript/jquery.js"></script>
<script src="../src/jscript/ui.mouse.js"></script>
<script src="../src/jscript/ui.draggable.js"></script>
<script>
$(document).ready(function(){
$(".block").draggable({
containment: 'document',
helper: 'clone',
opacity: 0.70,
zIndex:10000,
scroll: true
});
});
</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>