dropping a draggable item from a div with 'overflow: scroll/auto' style applied?

Question

Here's my fiddle: http://jsfiddle.net/challenger/u22PD/69. Draggable and droppable are initialized this way:

$lister.find('.draggable').draggable({
    stack: 'div'
});

$('#insert-editor .droppable-target').droppable({
    drop: function(event, ui) {
        var $this = $(this);
        $this.html(ui.draggable);
    }
});

It is only possible to drag .darggable item over #image-lister div. How do I drop a .draggable item onto the droppable-target?

Also how to keep the draggable item after it's been dragged-dropped to the target?

Answer 1

Found a solution there: jQuery Draggable and overflow issue

Changed my code to this:

$lister.find('.draggable').draggable({
    scroll: false,
    helper: 'clone',
    start: function() {
        $(this).hide();             
    },
    stop: function() {
        $(this).show()
    }
});

Here's the result: http://jsfiddle.net/challenger/u22PD/91

The only thing that doesn't satisfy me is that you still can see as a draggable item goes under the hidden part of the parent division when dragged. Maybe you know how to solve this?

Answer 2

Remove overflow: auto; from #image-lister

Try this code:

DEMO

#image-lister { 
    position: relative; max-width: 1920px; min-width: 300px; margin: 0 auto;
    height: 530px;
    overflow: auto; /*remove this */
    background: #ddd;
    background: #555;
    z-index: 2;
    padding: 10px;
    padding-bottom: 0;
}