從應用「overflow：scroll/auto」風格的div中拖放可拖動項目？

Question

這是我的小提琴：http://jsfiddle.net/challenger/u22PD/69。 Draggable和droppable初始化是這樣的：

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

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

只可能在#image-lister格拖動.darggable項目。如何將.draggable物品放到droppable-target上？

另外如何在0123-項目被拖放到目標後保留它？

Answer 1

找到了解決方法有：jQuery Draggable and overflow issue

改變了我的代碼如下：

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

這裏的結果：http://jsfiddle.net/challenger/u22PD/91

不滿足我的是，你仍然可以看到作爲拖當拖動項目開始父師的隱藏部分下的唯一的事情。也許你知道如何解決這個問題？

Answer 2

從#image-lister

刪除overflow: auto;試一下這個代碼：

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; 
}