I've distilled the problem into the shortest page which exhibits the problem (apologies for inline style).
If you scroll down and drag the 'drag me' title, look how the dragged element zooms away from the cursor. It seems to be moving double the distance (relative to the document) than it needs to.
I have reproduced the problem in IE8, FF3.5 and Chrome. On WinXP and Ubuntu.
Am I doing something stupid in my code, or have I encountered a bug?
Thanks,
Chris.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".draggable").draggable();
});
</script>
</head>
<body>
<div style="width: 100px; height: 800px; background: green;">
</div>
<h1 class="draggable">drag me</h1>
<div style="width: 100px; height: 800px; background: green;">
</div>
</body>
</html>
See Question&Answers more detail:os