Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
285 views
Welcome To Ask or Share your Answers For Others

1 Answer

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...