jQuery的Draggable和溢出问题

当我从被设置为overflow:scroll的容器div中拖动div时,我遇到了不希望的效果。

我find了一个他们有问题的例子,但是我一直没有find解决办法

粘贴bin的例子

会发生什么是滚动只是增加,我可以看到为什么这将是所需的行为,如果你想拖动滚动div的目的地,但我想能够把它的滚动把握之外。

我有一个类似的问题,使两个溢出自动div之间拖动。 在以前的答案的帮助下,我发现这个组合适合我(Safari 5.0.3,jquery-1.4.4,jquery-ui-1.8.7):

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

appendTo

元素,select器默认:“父”

传递给或由appendTo选项select的元素将在拖动期间用作可拖动的助手的容器。 默认情况下,该助手被附加到与可拖动相同的容器中。

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

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

注意文档当然是值得的

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

滚动

types:布尔值
默认值: true
如果设置为true ,则容器在拖动时自动滚动。

所有进入这里的人,从我的错误中学习,RT(F)M !!!

它的工作克隆解决scheme,但有两个问题。

首先:克隆被附加到正文。 根据你的CSS,你的元素可以改变样式,因为在它开始之前,它是在另一个元素的内部,在拖动过程中,它将直接在body元素上。

第二:有时元素必须移动,克隆让对象在那里。

所以,解决这个问题的方法是:

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

设置滚动选项不会阻止子项隐藏在溢出区域中。 我已经想出了一个使用帮手选项的工作。 一探究竟:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

另外这里是对我做的另一篇文章的参考:

jquery ui可拖动的元素不是可拖动的滚动div之外的元素

你也可以指定你不想包含哪些types的元素。

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

应用此取消属性来忽略指定的子元素中的事件

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