Draggable scroll position bug

Draggable scroll position bug


Hello,
I have a page that is using the draggable/droppable - it has the
scroll option set to true. Now everytime I try to scroll up/down the
dropping position changes - i.e: It doesnt match with where the mouse
position is. I have created a reproduceable example:
<html>
<head>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery-ui-personalized-1.5.3.min.js" type="text/
javascript"></script>
<style type="text/css">
.styleInfo{height:300px;overflow:auto;width:600px;}
.grey {background-color:#F7F5F4;color:#356198;}
</style>
</head>
<body>
<div class="styleInfo">
<table width="500" border=0>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
<tr class="grey"><td><div class="d">1</div></td></tr>
</table>
</div>
<script type="text/javascript">
$(".d").droppable(
{
accept: function(draggable) { return true },
drop: function(ev, ui)
{
ui.element[0].style.border = "";
},
over: function(ev, ui)
{
ui.element[0].style.border = "1px #989898 solid";
},
out: function(ev, ui)
{
ui.element[0].style.border = "";
}
});
$(".d").draggable(
{
scroll: true,
helper: 'clone'
});
</script>
</body>
</html>
Is there a way to get this fixed?
Thank you