Question

我有一个jquery可滚动条，但不限于它的父元素。当我拖动它时，它会强制身体自动滚动超出它的宽度，它“看起来”就像是在运作。

然而，当我在此点之后点击我的元素时，它会得到一个“奇怪”的位置并且似乎消失（这与位置设置为负值有关。）

我注意到，即使是jquery的例子，它仍然存在一个非常高（和窄）的div来帮助解决这个问题。但是，他们的例子似乎也是横向工作的。

以下是我所指的内容的链接：http://hortitude.com/samples/drag_and_drop/drag_drop.html

相关源代码：

<html>
<head>
    <script type="text/javascript">
       $(function () {
          $(".blueguy").draggable();
          $(".greenguy").draggable({ scroll: false, containment: 'parent' });
       });
    </script>

    <style type="text/css">
      .blueguy {
         background-color: #0000ff;
      }
      .greenguy {
         background-color: #00ff00;
      }
    </style>

</head>
<body style="height:100%;">
<div  style="height:100%;">
<div class="blueguy" style="width:300px; height:150px;">Drag me "off screen" such that the browser window auto scrolls.  Then click on me and I dissapear</div>
<div class="greenguy" style="width:300px; height:150px;">I am constrained to the be contained within my parent</div>


</div>
</body>
</html>

真正的问题是：为什么会发生这种情况？我知道我可以通过额外的div来解决这个问题，但我很好奇为什么会看到这个？

此外，知道是否还有其他好的解决办法会很有趣。

Answer 1

我可以重现这种行为。但它不会发生在点击上，如果您将元素拖离屏幕并在此之后尝试将其拖回，则会发生这种情况。如果你首先滚动到最后，效果会更强，所以如果你将元素从屏幕向右拖动，首先将滚动条放到右边，然后尝试将项目拖回到左边。

但你的实际问题是什么？

它对我来说看起来有点儿麻烦。在jquery ui draggable中，在屏幕外滚动似乎有点混乱。

有趣的是..我试图重现那种行为，我把容器中的两个div包裹起来，“向后滚动”非常快，但项目从不跳过鼠标，所以没有“消失”，见这里http://jsfiddle.net/hFAru/17/。那会对你有什么帮助吗？

Answer 2

这是该错误的一张票：

http://bugs.jqueryui.com/ticket/5718

坏消息是这张票已经存在两年了，没有开发商的反馈。

我找到了一种解决方法来避免此错误，并且正在向可拖动元素添加position:absolute。

您可以在此处找到一个示例：http://jsfiddle.net/hMdZj/

Answer 3

尝试使用此

$(".selector").draggable({ helper: "clone" });

滚动时，jquery draggable自动滚动消失

3 个答案: