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

Question

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

jquery-uijquery-ui-draggable

25

使用jQuery UI，我正在尝试创建一个带有两个可滚动容器的界面，每个容器都包含许多可拖动元素。用户可以将元素从一个容器拖到另一个容器中。 放置特性不是问题。当放下时，元素将被分离并在新父级下正确地重新创建。

我的问题是，当容器应用了position:relative;时，无法在容器外部显示可拖动元素，因此，在拖动时，当元素移动到容器边界之外时，元素将消失。

这种默认行为是有道理的，因为通常用户会想在容器内拖动元素。作为解决方法，我原以为可以使用可拖动属性"appendTo"，我认为这会将元素移动到其容器之外，但不幸的是，似乎没有任何效果。

DOM：（每个视图都可滚动，每个容器都具有position:relative，并且足够大以容纳所有元素）

BODY
    VIEW 1
        CONTAINER
            DRAGGABLE ELEMENTS
    VIEW 2
        CONTAINER
            DRAGGABLE ELEMENTS

Javascript:

JavaScript：

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

请查看 JSFiddle 以获得问题的简化说明。我不想用可投放代码使示例变得臃肿，所以这只是说明拖动问题的例子。http://jsfiddle.net/Em7Ak/

提前致谢。

- tomturton

4个回答

6

使用“clone”助手，在拖动项目时隐藏它，停止后再次显示。

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

- kavehmb

5

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

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

这是我的详细问题，JqueryUI，在包含大表的滚动可放置div中拖动元素到单元格

我找到了一种解决方法。思路是在辅助构建回调期间将元素克隆附加到可滚动容器上，然后使用setTimeout函数在1ms后将helper附加到body上。为了避免偏移问题，helper位置必须映射到鼠标位置。

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

- sdespont

0

将position:absolute添加到卡片样式中。

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

- Saram

谢谢，这个方法很好，但是当我对每个容器应用position:relative属性时就不起作用了。由于用户可以加载图案，因此我必须使用这个属性。我已经相应地修改了我的问题和JSFiddle。 - tomturton

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul · Accepted Answer

我不确定这是否能够完全解决你的问题，但我在寻找答案时遇到了同样的问题，以下是我的发现。

在 .draggable() 的选项中传入 helper:'clone' 可以自动克隆该项，从而使其可以被拖出容器。并且使用 appendTo:'body' 将其放置在 <body> 标签的末尾。因此，在我的情况下，我的选项看起来有点像这样，添加 revert:'invalid' 使其在未放置在有效位置时会弹回：

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