Draggable Auto-scroll Issue (IE 7) - Example included.

Draggable Auto-scroll Issue (IE 7) - Example included.


I have seen several postings that seem to be related to this topic.
Here's one related to ui.dialog:
http://groups.google.com/group/jquery-ui/browse_thread/thread/319d417de75cb9f7
/79b070a312168498?lnk=gst&q=draggable+scroll+true#79b070a312168498
Here's one related to ui.sortable:
http://groups.google.com/group/jquery-ui/browse_thread/thread/fcca456674176a18/273ff6022f160558?lnk=gst&q=sortable+scroll#273ff6022f160558
But I have not see one specific to ui.draggable. The issue is that
once the window has been scrolled by dragging an element, picking up
the element and attempting to drag again causes the element to jump
"up" the same distance that the viewport has been scrolled. There are
other issues with the current (1.5.2) release (i.e. the element being
dragged would take off when the viewport started to scroll) but when I
test with the latest revisions in SVN as of today (10/20/2008) this is
that only issue that I can see remaining. I have just started working
with jQuery so I have not dug into the code but if someone can verify
that this is being worked on that would be helpful. Or if it is not
being worked on I will enter a new ticket for this specific problem.
BTW, it works fine in Firefox with both the current release and the
latest revisions in SVN.
Thanks,
EC
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery UI Draggable Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.droppable.js"></script>
<script language=javascript type="text/javascript">
$(document).ready(function(){
alert( document.compatMode );
$("#source")
.draggable({scroll:true});
});
</script>
</head>
<body>
<div id="source" style="width:40px; height:40px;
position:absolute; top:40px; background-color:#0000FF">
</div>
<div id="target" style="width:40px; height:40px;
position:absolute; top:400px; background-color:#FF0000">
</div>
<div id="instructions" style="position:absolute; top:200px;">
----- Resize your browser so the bottom of the viewport is here.
The try to drag the blue square to the red square.<br /><br />
As soon as the viewport starts to scroll the box that is being
moved accelerates away from the cursor.
</div>
Testing ui.draggable.js<br />
</body>
</html>