jquery ui droppable：如何使用溢出将元素放在 div 之外：隐藏？

Question

我知道如何使用jquery ui droppable。

但我不确定是否可以这样做：

see a live example with this fiddle

我有一个 div 中的元素列表溢出：隐藏：

html：

<div id="list">
    <p id="draggable_1">Element 1</p>
    <p id="draggable_2">Element 2</p>
    <p id="draggable_3">Element 3</p>
</div>

css：

#list
{
    overflow:hidden;
}

javascript/jQuery：

$("#draggable_1").draggable();
$titre_track_1.droppable({
    drop: function () {
        alert("dropped");
    }
});

如果我尝试将诸如 draggable_1 之类的元素放在 div #list 之外，则该元素不可见。这是逻辑，因为父级处于溢出中：隐藏

你知道是否可以将该元素放在外面吗？我需要让这个 div 带有溢出：隐藏

Answer 1

您可以使用克隆助手在拖动开始时克隆元素并使用appendTo 选项将其附加到正文：

$("#draggable_1").draggable({
    helper: 'clone',
    appendTo: 'body',
    start: function(e){
        $(this).css('visibility', 'hidden');
    },
    stop: function(){
        $(this).css('visibility', 'visible');
    }
});

http://jsfiddle.net/xYQ9c/