jquery - 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 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");
        }    
    });
});?