Question

我已将问题提炼到显示问题的最短页面（内联样式道歉）。

如果向下滚动并拖动“拖动我”标题，请查看拖动的元素如何缩小光标。它似乎是移动距离（相对于文档）的两倍而不是它需要的。

我已经在IE8，FF3.5和Chrome中重现了这个问题。在WinXP和Ubuntu上。

我在代码中做了一些愚蠢的事情，还是遇到了错误？

谢谢，

克里斯。

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

Answer 1

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


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

或任意区域（文档中的其他选项）：


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

jQueryUI - 拖动时自动滚动变为双倍距离

1 个答案: