Question

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

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

我的问题是当容器已应用position: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/

非常感谢提前。

Answer 1

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

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

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

Answer 2

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

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

以下是我的问题，有关详细信息，JqueryUI, drag elements into cells of a scrolling dropable div containing large table

我找到了解决方法。我们的想法是在helper构造回调期间将元素clone附加到可滚动容器，然后在1ms后使用setTimeout函数将帮助器附加到body。辅助位置必须映射到鼠标位置以避免偏移问题。

这是我的解决方案（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;
}

可移动元素隐藏在容器外部

4 个答案: