jQueryUI - auto scroll goes double distance when dragging

问题

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>

回答1:

For me you've found a bug :)
It works fine until the mouse cursor stays inside the visible area... then the H1 enable the hyperdrive :D
To reduce (but not to avoid completely) the bug's effects you can restrict the draggable area into e tag (eg. body) AND disable the scroll:


            $(".draggable").draggable();
            $(".draggable" ).draggable( "option", "containment",  'body' );
            $(".draggable" ).draggable(  "option", "scroll" , false  );

or an arbitrary area (other option in docs):


            var area=Array(0,740,300,880);
            $(".draggable").draggable();
            $(".draggable" ).draggable( "option", "containment",  area );
            $(".draggable" ).draggable(  "option", "scroll" , false  );

来源：https://stackoverflow.com/questions/4606655/jqueryui-auto-scroll-goes-double-distance-when-dragging

标签

jquery

jquery-ui

drag-and-drop