jquery ui droppable：如何使用overflow：hidden删除div之外的元素？

Question

我知道如何使用jquery ui droppable。

但是，如果可以做到这一点，我不会感到沮丧：

see a live example with this fiddle

我在div中有一个元素列表，它位于overflow：hidden：

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

如果我尝试在div #list之外删除像draggable_1这样的元素，则该元素不可见。这是逻辑，因为父级处于溢出状态：隐藏

你知道是否可以将该元素丢弃到外面？我需要这个div有溢出：隐藏

Answer 1

您可以使用clone helper在拖动开始时克隆元素，并使用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/