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('<div id="clone" class="cartridge">' + $(this).html() + '</div>');   
            $("#clone").hide();
            setTimeout(function(){
                $('#clone').appendTo('body'); 
                $("#clone").show();
            },1);
            return $("#clone");
        }    
    });
});​

Answer 2

If i undestand correctly, after you scroll, the highlitedcells is not the right one..

Seems to me that it calcualtes the cell to highlight from your container element but then replicate de position inside the table element.

Bascily, it check for the offset of the mouse from the 'container2' and then highlinght the cell at the offset but from from the table 't' position.

Take a chance and use position instead of offset. and mentioned on http://api.jquery.com/offset/,

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent.

Personnaly i would simply apply a css class to the cells and use css:hover. /EDIT: if the only reason you need to do that is to highlight the cell.. maybe you want to trigger some other stuff too.