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


Tags: javascript,jquery,css,jquery-ui,jquery-ui-droppable

Problem :

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



Solution :

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/


    CSS Howto..

    How to assign CSS to mobile page in asp.net

    specifiy UL properties for nested class (sociallinks) but still it is working as a property of parent class (header) how can i solve it?

    How can I get my menu/logo to be centered instead of all the way to the right?

    CSS list styling - how to reduce the distance between parent and children of the previous parent?

    Nginx server (not showing changes) - Delete cache?

    how to align this div to appear on right most side of webpage?

    how to only load one IFRAME using @media and display:none; CSS

    How to apply CSS generated by colorzilla to the body element [closed]

    How to make a transition in height without knowing the height before?

    How to insert css arrow into html page and make it clickable

    How to test browser performance of specific CSS property?

    How to override default Polymer CSS

    How to insert / edit / group css rules faster?

    How to make divs re-arrange when another div is positioned between existing?

    How do I get my tabs to line up properly using CSS?

    How to create a margin between two seperate divs?

    How To Style A Class Based On Unique ID?

    Want to duplicate css styles for an ID based style, how to do this with least duplication?

    How do I add line-height to a