jquery-ui ui下载 - jQuery Draggable和溢出问题




ui中文 ui教程 (6)

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

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

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

我发现了一个他人遇到问题的例子,但我一直无法找到解决方案

粘贴箱示例

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


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

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

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

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

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

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

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


appendTo

Element,SelectorDefault:'parent'

传递给或由appendTo选项选择的元素将在拖动期间用作可拖动辅助器的容器。 默认情况下,助手会作为可拖动对象附加到相同的容器。

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

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





jquery-ui drag-and-drop