JqueryUI, drag elements into cells of a scrolling

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 table. I want also be able to drag element from any div to any div.

This example works almost fine. My last problem is about the cell hoverClass property: when I am dragging an element from the "container A" near the border of the "container B", I implemented an auto-scroll behaviour to navigate in my table to reach any cells. But, after the scroll simulation, the hoverClass is not apply to the right cell. However, the element is always dropped into the right cell.

https://jsfiddle.net/Bouillou/QvRjL/434/

Is my approach correct?

EDIT

I found a workaround. The idea is to append the element clone to the scrollable container during 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 final solution: https://jsfiddle.net/Bouillou/QvRjL/434/

I am sure that it is possible to develop a best way to do that.

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.