jquery-ui – 可移动元素隐藏在容器外部

使用jQuery UI，我试图创建一个带有两个可滚动容器的接口，每个容器包含许多可拖动元素。用户可以将元素从一个容器拖到另一个容器。

删除功能不是问题。删除后，元素将被分离并在其新父项下的正确位置重新创建。

我的问题是，当容器有位置时，可拖动元素不能显示在容器外：relative;应用，因此在拖动时，元素在移出容器边界外时将消失。

此默认行为是有意义的，因为通常用户希望在其容器内拖动元素。作为一种解决方法，我假设解决方案是使用draggable属性’appendTo’，我认为它会将元素移动到其容器之外，但不幸的是，这似乎没有任何影响。

DOM :(每个视图都是可滚动的，每个容器都有位置：相对的，并且可以保存所有元素所需的大小)

BODY
    VIEW 1
        CONTAINER
            DRAGGABLE ELEMENTS
    VIEW 2
        CONTAINER
            DRAGGABLE ELEMENTS

使用Javascript：

$('div.card').draggable({
    appendTo: 'body',scroll: false //stops scrolling container when moved outside boundaries
});

有关问题的简化说明，请参阅JSfiddle。我不想用可放置的代码来膨胀示例，所以这只是说明了拖动问题。 http://jsfiddle.net/Em7Ak/

提前谢谢了。

解决方法

我不确定这是否能解决您的确切问题，但我遇到了这个问题，寻找相同的答案，这就是我找到的。

在.draggable()的选项中，传入helper：’clone’以自动克隆项目，以便将其拖出容器。并使用appendTo：’body’将它放在< body>的末尾。标签。所以在我的情况下，我的选项看起来有点像这样，添加了revert：’invalid’，如果它没有被丢弃，那么它会被弹回：

jQuery(".myselector").draggable({
    helper: 'clone',revert: 'invalid',appendTo: 'body'
});