25

使用 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/

提前谢谢了。

4

4 回答 4

64

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

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

jQuery(".myselector").draggable({
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body'
});
于 2013-02-18T17:16:48.527 回答
6

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

$(".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();
    }
});
于 2015-10-08T00:49:30.373 回答
5

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

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

这是我有关更多详细信息的问题，JqueryUI，将元素拖动到包含大表的滚动可拖放 div 的单元格中

我找到了解决方法。想法是在帮助器构造回调期间将元素克隆附加到可滚动容器，然后在 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");
        }    
    });
});​
于 2013-01-05T08:39:03.587 回答
0

添加位置：绝对卡样式：

div.card {
    position:absolute;
    width:100px; height:50px;
    border:1px black solid;
    background-color:orange;
    text-align:center; vertical-align:middle;
}
于 2013-01-04T11:57:14.543 回答