Jquery ui 隐藏在容器外部的可拖动元素

使用jQueryUI，我试图创建一个包含两个可滚动容器的界面，每个容器包含许多可拖动的元素。用户可以将元素从一个容器拖动到另一个容器

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

我的问题是，当容器具有

位置：relative时，可拖动元素不能显示在其容器外部已应用，因此在拖动时，当元素移动到容器边界之外时，它将消失

这种默认行为是有意义的，因为用户通常希望将元素拖到其容器中。作为一种变通方法，我假设解决方案是使用可拖动属性“appendTo”，我认为这会将元素移出其容器，但不幸的是，这似乎没有产生任何效果


DOM：（每个视图都是可滚动的，每个容器都有position:relative，可以容纳所有元素）

Javascript:

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

请参阅JSFiddle以获得问题的简化解释。我不想在这个示例中使用可拖放的代码，所以这只是说明了拖动问题


非常感谢。
在卡片样式中添加位置：绝对：

div.card {
    position:absolute;
    width:100px; height:50px;
    border:1px black solid;
    background-color:orange;
    text-align:center; vertical-align:middle;
}

几个月前我也有类似的问题

我的需要是能够使用一个大容器与其他容器的自动滚动

这是我的问题，想了解更多细节

我找到了一个解决办法。其思想是在helper构造回调期间将元素克隆附加到可滚动容器中，然后在1ms后使用setTimeout函数将helper附加到主体中。辅助对象位置必须映射到鼠标位置，以避免偏移问题

以下是我的解决方案（JSFIDLE现在似乎已关闭，如果windows中没有显示任何代码，请稍后再试）：

$（'[id^=“drag-”]）。每个（函数（）{
$（此）。可拖动({
不透明度：0.7，
光标：{顶部：15，左侧：50}，
附于：'正文'，
遏制:"身体",，
卷轴：没错，
助手：函数（）{
//黑客将墨盒附加到机身上（在其他div上方可见），
//但仍然属于可滚动容器
$（'#container'）.append（'+$（this.html（）+''）；
$（“#克隆”）.hide（）；
setTimeout（函数（）{
$（'克隆'）.appendTo（'正文'）；
$（“#克隆”）.show（）；
},1);
返回$（“#克隆”）；
}    
});
});​
我不确定这是否能解决您的确切问题，但我遇到了这个问题，寻找相同的答案，这就是我发现的

在.draggable（）的选项中，传入
helper:'clone'
以自动克隆项目，以便将其从容器中拖出。并使用
appendTo:'body'
将其放在
标记的末尾。所以在我的例子中，我的选项看起来有点像这样，添加了
revert:'invalid'
，如果它没有被放在有效的地方，就会导致它反弹：

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

使用“克隆”辅助工具，在拖动项目时隐藏该项目，并在停止时再次显示该项目

$(".removalbe-recom").draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    containment: "document",
    zIndex: 10000,
    scroll:false,
    start: function (event, ui) {
    $(this).hide();
    },
    stop: function (event, ui) {
        $(this).show();
    }
});

谢谢，直到我应用位置：相对于每个容器为止。我必须使用这个属性，因为用户可以在模式中加载。我已经相应地修改了我的问题和JSFIDLE。助手：“克隆”适用于我，因为当可拖动项被拖动到其父边界之外时，它是不可见的。Katat听起来好像你缺少解决方案的附件：“主体”部分在我的情况下，此配置还有一个问题，克隆元素的绝对位置与原始元素类似，因此它位于页面顶部，因为可拖动元素位于页面中间其父div的顶部：-）我想我必须寻找克隆增强功能…请注意，在我的情况下，我还必须添加一个
z-index
；其他人可能也有类似的问题。
jQuery(".myselector").draggable({
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body'
});

$(".removalbe-recom").draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    containment: "document",
    zIndex: 10000,
    scroll:false,
    start: function (event, ui) {
    $(this).hide();
    },
    stop: function (event, ui) {
        $(this).show();
    }
});