Drop event blocked by slidding div?

I'm having some issues trying to drop an element in a slidding panel that appears when the drag begins. And the first drop don't work. You must to drop the item twice. This shouldn't be happening.

Also i wanted to keep the panel visible for 3 seccond to give the user to opportunity to drag and drop another image but instead keep there it slides up and down again. Its possible to avoid that? Or make the delay reset on another drop? I mean if another element is dropped start again the delay.

And the $('.last.thumb').replaceWith($(ui.draggable).clone()); isn't working well. This should display th开发者_开发技巧e last image added.

$(function() {
var thumb = $(".thumb");
var container = $("#favorites");
thumb.draggable({
    opacity: 0.75,
    helper: "clone",
    start: function() {
        container.slideDown();
    },
    stop: function(){
        container.delay(3000).slideUp();
    }
});

container.droppable({
    tolerance: 'fit',    
    drop: function(event, ui) {
        $('.last.thumb').replaceWith($(ui.draggable).clone().addClass('last'));
        alert(ui.draggable.attr('id').substring(6));
        container.delay(3000).slideUp();
    }
});
});

Working Example Here

About the sliding up and down, try using .clearQueue() In your example, you .last div doesn't have .thumb on it, and when you replace it with a clone, it no longer has the last class, you have to add it to the clone. See this example: http://www.jsfiddle.net/dh8A8/5/