隐藏外部容器可拖动元件(Draggable element hidden outside conta

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

滴功能是不是一个问题 。当下降时，元件脱离，并在其新的母公司在正确的地方重建。

我的问题是， 将可拖动的元素不能当容器具有其容器外被显示position:relative; 施加，这样的同时拖动，当容器边界之外移动的元件将会消失。

此默认行为是有道理的，因为通常用户会想拖动其容器内的元素。作为一种变通方法我认为解决办法是使用可拖动属性“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/

提前谢谢了。

Answer 1:

我不知道这是否会解决您的具体问题，但我遇到了这个问题，寻找相同的答案，这是我发现了什么。

在.draggable（）的选项，通过在helper:'clone'自动进行该项目的克隆，因此它可以被拖出的容器。并使用appendTo:'body'把它在结束<body>标签。所以，在我的情况，我的选择看起来有点像这样，在加入revert:'invalid' ，以使其弹回如果不掉线某处有效：

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

Answer 2:

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

我的需要是能够从别人用一个大容器的自动滚动

这里是我的更多的细节问题， jQueryUI的，拖动元素到含有大表滚动dropable DIV的细胞

我发现了一个解决方法。我们的想法是元素克隆到滚动容器添加辅助施工回调过程中，然后用1毫秒后setTimeout函数助手追加到身体。助手位置必须在鼠标的位置，以避免偏移问题映射。

这里是我的解决方案（的jsfiddle似乎是失望吧，请稍后再试，如果没有代码在窗口中显示）： http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },
        appendTo: 'body',
        containment: 'body',        
        scroll: true,
        helper: function(){ 
            //Hack to append the cartridge to the body (visible above others divs), 
            //but still belonging to the scrollable container  
            $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');   
            $("#clone").hide();
            setTimeout(function(){
                $('#clone').appendTo('body'); 
                $("#clone").show();
            },1);
            return $("#clone");
        }    
    });
});

Answer 3:

使用“克隆”帮手和隐藏物品的同时拖动它，并再次显示它停止。

$(".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();
    }
});

Answer 4:

添加的位置是：绝对为卡样式：

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

文章来源: Draggable element hidden outside container