jquery - jQueryUI - auto scroll goes double distance when dragging

Question

Welcome To Ask or Share your Answers For Others

jquery - jQueryUI - auto scroll goes double distance when dragging

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

jquery - 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:05:51+0000

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  );

Categories

jquery - jQueryUI - auto scroll goes double distance when dragging

jquery - jQueryUI - auto scroll goes double distance when dragging

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags