JqueryUI, drag elements into cells of a scrolling droppable div containing large table

Question

I am facing a drag/drop issue.

I want always see the element which is dragging, and I want be able to scroll a specific div to drop the element in any cell of my tab

Answer 1

Apparently my update is the only solution.

It is working for months now without problem.

I found a workaround. The idea is to append the element clone to the scrollable container durring the helper construction callback, then append the helper to the body using a setTimeout function after 1ms. The helper position must be mapped on the mouse position to avoid offset problem.

Here is my solution : http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },
        appendTo: 'body',
        containment: 'body',        
        scroll: true,
        helper: function(){ 
            //Hack to append the cartridge to the body (visible above others divs), 
            //but still bellonging to the scrollable container  
            $('#container').append('
' + $(this).html() + '
');   
            $("#clone").hide();
            setTimeout(function(){
                $('#clone').appendTo('body'); 
                $("#clone").show();
            },1);
            return $("#clone");
        }    
    });
});​