jQueryUI-拖动时自动滚动翻倍

本文介绍了jQueryUI-拖动时自动滚动翻倍的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已将问题精简到显示问题的最短页面(内联样式的歉意).

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.

我已在IE8，FF3.5和Chrome中重现了该问题.在WinXP和Ubuntu上.

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?

谢谢

克里斯.

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

推荐答案

对我来说，您发现了一个错误:)
它可以正常工作，直到鼠标光标停留在可见区域内为止.然后H1启用超级驱动器:D
要减少(但不能完全避免)错误的影响，您可以将可拖动区域限制在e标签(例如body)中，并禁用滚动:

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

这篇关于jQueryUI-拖动时自动滚动翻倍的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！