jquery ui droppable : how to dropp an element outside a div with overflow:hidden?

Question

I know how to use jquery ui droppable.

But i'm not sur if it's possible to do this :

see a live example with this fiddle

I have a list of element in a div which is in 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");
    }
});

If i try to dropp an element like draggable_1 outside the div #list, the element is not visible. It's logic because the parent is in overflow:hidden

do you know if it's possible to drop that element outside ? I need to have this div with overflow:hidden

Answer 1

You can use clone helper to clone element on drag start and append it to the body with appendTo option:

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

http://jsfiddle.net/xYQ9c/