draggable and droppable overflow issue

Question

I have this problem with .draggable and .droppable: I have two section on which I can drag my elements from left to right or right to left but on left section I have an overflow and if I want to drag from that section into the right section is not possible :| If I remove the overflow from left section is working perfect but i need that overflow so how cand I do that with overflow auto in left section.

the overflow is this:

.grpupover{
   overflow-y:auto;
    overflow-x: hidden;
    height: 150px;
    width: 150px;

}

Here is a fiddle example:

http://jsfiddle.net/CPA5Y/28/

Answer 1

You can try:

$(".draggable").draggable({
    revert: true,
    revertDuration: 0,
    helper: "clone"
});

http://jsfiddle.net/CPA5Y/32/