javascript - jquery ui droppable：如何在 div 外使用溢出删除元素：隐藏？

Question

我知道如何使用jquery ui droppable。

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

用这个小提琴看一个活生生的例子

我有一个 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

您可以使用克隆助手在拖动开始时克隆元素并将其附加到带有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/