使用 jQuery UI，我尝试创建一个带有两个可滚动容器的界面，每个容器包含许多可拖动元素。用户可以将元素从一个容器拖到另一个容器。
丢弃功能不是问题。放下时，该元素将被分离并在其新父元素下的正确位置重新创建。
我的问题是当容器应用了position:relative;时，可拖动元素无法显示在其容器之外，因此在拖动时，该元素将消失被移动到容器边界之外。
这种默认行为是有道理的，因为通常用户希望将元素拖动到其容器内。作为一种解决方法，我假设解决方案是使用可拖动属性“appendTo”，我认为这会将元素移动到其容器之外，但不幸的是，这似乎没有任何效果。
<小时/>DOM:(每个 View 都是可滚动的，每个容器都有position:relative，并且大小足以容纳所有元素)
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'
});
关于jquery-ui - 隐藏在容器外部的可拖动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14155503/