Question

当我从设置为overflow的容器div中拖动一个div时，我有一个不受欢迎的效果：滚动。

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

滚动只是增加了，我可以看到为什么如果你想拖动到可滚动div中的目的地，这将是所希望的行为，但我希望能够将其带到滚动抓取之外。

Answer 1

我有一个类似的问题，可以在两个overflow-auto div之间进行拖动。在前面的答案的帮助下，我发现这个组合对我有用（Safari 5.0.3，jquery-1.4.4，jquery-ui-1.8.7）：

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

Answer 2

appendTo

Element，SelectorDefault：'parent'

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

代码示例使用指定的appendTo选项初始化一个draggable。

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

Answer 3

注意文档

当然是值得的

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

滚动

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

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

Answer 4

它运行的克隆解决方案，但有两个问题。

首先：将克隆附加到身体上。根据你的css，你的元素可以改变样式，因为在它开始之前，它在另一个元素内部，在拖动过程中，它将直接在body元素上。

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

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

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

Answer 5

设置滚动选项不会阻止子项隐藏在溢出区域中。我想出了一个使用helper选项的work-a-round。看看：

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

此处还有对我发表的另一篇文章的引用：

jquery ui draggable elements not 'draggable' outside of scrolling div

Answer 6

您还可以指定不想包含哪些类型的元素。

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

jQuery可拖动和溢出问题

6 个答案:

滚动