jQuery Draggable和溢出问题

当我从设置为溢出的容器div中拖动div时，会产生不期望的效果：滚动。

我找到了其他人遇到问题的示例，但是我找不到解决方案

粘贴箱示例

发生的事情是滚动只是增加了，我可以理解为什么如果您想拖动到可滚动div内的目标位置，但是我希望能够将其移出滚动控制范围之外，这将是理想的行为。

我在启动两个溢出自动div之间的拖动时遇到了类似的问题。在前面的答案的帮助下，我发现此组合适用于我（Safari 5.0.3，jquery-1.4.4，jquery-ui-1.8.7）：

appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'

appendTo

元素，选择器默认值：'parent'

传递到appendTo选项或由appendTo选项选择的元素将在拖动过程中用作可拖动帮助程序的容器。默认情况下，辅助程序与可拖动对象附加到同一容器。

代码示例使用指定的appendTo选项初始化可拖动对象。

$('.selector').draggable({ appendTo: 'body' });

当然要注意文档

http://docs.jquery.com/UI/Draggable#option-scroll

滚动

类型：布尔
值默认值： true
如果设置为true，则容器在拖动时会自动滚动。

所有进入这里的人，请从我的错误中学习，RT（F）M！

克隆解决方案可以工作，但是有两个问题。

第一：将克隆体附加到身体上。根据您的CSS，您的元素可以更改样式，因为在开始之前，它位于另一个元素的内部，并且在拖动过程中，它将直接位于body元素上。

第二：有时元素必须移动，而克隆对象将其放在那里。

因此，解决此问题的方法是：

$('.selector').draggable({
    helper: 'clone',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});

设置滚动选项不会阻止孩子隐藏在溢出区域中。我想出了一个使用helper选项的方法。一探究竟：

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

另外，这里是我发表的另一篇文章的参考：

jQuery UI的可拖动元素在滚动div之外不可“拖动”

您也可以指定不想包括的元素类型。

<div class="draggable"> 
    <h2>This will drag the div</h2>
    <ul>
       <li>This won't drag the div</li>
    </ul>
</div>

应用此cancel属性可忽略指定子元素中的事件

$('.draggable').draggable({cancel : 'ul'});