jQuery drag and drop to scrolling div - dropped elements not scrolling

Question

I have a scrolling div containing a number of divs as target slots for draggable divs. This slots container needs to be scrolled horizontally to see all the target slots.

Now when the draggable elements are dragged into their correct slots, and the slots container is scrolled, the dropped elements don't scroll in the div. Is there a way to have the dropped divs scroll inside the slots container?

$('.draggable').draggable({
    stack: '#drag_container div',
    revert: true
});

$('.drop_target').droppable({
    accept: '#drag_container div',
    drop: handleDrop
});

function handleDrop(event, ui) { 
    var slot_number = $(this).data('number');
    var draggable_number = ui.draggable.data('number');

    if (slot_number == draggable_number) {
        ui.draggable.css('cursor', 'pointer');   
        ui.draggable.draggable('disable');

        $(this).droppable('disable');
        ui.draggable.position({ of: $(this), my: 'left top', at: 'left top'});
        ui.draggable.draggable('option', 'revert', false);
    }
}

See fiddle at http://jsfiddle.net/uZ8kN/7/

Answer 1

See this :

jsFiddle : http://jsfiddle.net/Khursheed_Ali/uZ8kN/8/

Replaced :

ui.draggable.position({ of: $(this), my: 'left top', at: 'left top'});

With :

    $(this).append(ui.draggable);
    $(ui.draggable).css("position","relative");
    $(ui.draggable).css("top","0px");
    $(ui.draggable).css("left","0px"); 

Answer 2

add this after if statement (slot_number == draggable_number) :

ui.draggable.appendTo("#drop_container");