隐藏在容器外的可拖动元素答案

【问题标题】：Draggable element hidden outside container隐藏在容器外的可拖动元素
【发布时间】：2012-12-18 19:04:33
【问题描述】：

使用 jQuery UI，我正在尝试创建一个带有两个可滚动容器的界面，每个容器都包含许多可拖动元素。用户可以将元素从一个容器拖到另一个容器。

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

我的问题是当容器应用position:relative;时，可拖动元素无法显示在其容器外，所以在拖动时，当元素移出容器边界时，元素会消失。

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

DOM：（每个视图都是可滚动的，每个容器都有 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/

非常感谢。

【问题讨论】：

标签： jquery-ui jquery-ui-draggable

【解决方案1】：

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

在 .draggable() 的选项中，传入 helper:'clone' 以自动克隆项目，以便将其拖出容器。并使用appendTo:'body' 将其放在<body> 标记的末尾。所以在我的情况下，我的选项看起来有点像这样，添加 revert:'invalid' 以使它在它没有被丢弃在某个有效的地方时弹回：

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

【讨论】：

helper: 'clone' 对我有用，适用于可拖动项目在其父边界外拖动时不可见的情况。
Katat 听起来您缺少解决方案的 appendTo: 'body' 部分
在我的情况下，此配置还有一个问题，克隆的元素具有与原始元素一样的绝对定位，因此它位于页面顶部，因为可拖动元素位于页面中间其父 div 的顶部 :-)我想我将不得不寻找克隆增强功能......
请注意，就我而言，我也必须添加z-index；其他人可能有类似的问题。

【解决方案2】：

使用“克隆”助手并在拖动项目时隐藏它并在停止时再次显示它。

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

【讨论】：

【解决方案3】：

几个月前我也遇到过类似的问题。

我的需要是能够从其他人那里使用一个大容器的自动滚动

这是我的问题，了解更多详情，JqueryUI, drag elements into cells of a scrolling dropable div containing large table

我找到了解决方法。想法是在帮助器构造回调期间将元素克隆附加到可滚动容器，然后在 1ms 后使用 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");
        }    
    });
});

【讨论】：

【解决方案4】：

添加位置：绝对卡片样式：

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

【讨论】：

谢谢，在我将 position:relative 应用于每个容器之前，此方法有效。我必须使用此属性，因为用户可以加载模式。我已经相应地改变了我的问题和 JSFiddle。