JqueryUI,将元素拖动到包含大表的滚动可放置div的单元格中

Question

我正面临拖放问题.

我想要总是看到拖动的元素,我想能够滚动一个特定的div来删除我的表的任何单元格中的元素.我也希望能够将元素从任何div拖动到任何div.

这个例子几乎没用.我的最后一个问题是关于单元格hoverClass属性:当我从"容器B"的边框附近的"容器A"中拖动一个元素时,我实现了一个自动滚动行为,以便在我的表格中导航以到达任何单元格.但是,在滚动模拟之后,hoverClass不适用于正确的单元格.但是,元素总是被放入正确的单元格中.

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

我的方法是否正确？

编辑

我找到了一个解决方法.我们的想法是在helper构造回调期间将元素clone附加到可滚动容器,然后在1ms后使用setTimeout函数将帮助器附加到body.辅助位置必须映射到鼠标位置以避免偏移问题.

这是我的最终解决方案:https://jsfiddle.net/Bouillou/QvRjL/434/

我相信有可能开发出最佳方法.

Answer 1

显然我的更新是唯一的解决方案.

它现在正在工作几个月没有问题.

我找到了一个解决方法.我们的想法是在helper构造回调期间将元素clone附加到可滚动容器,然后在1ms后使用setTimeout函数将帮助器附加到body.辅助位置必须映射到鼠标位置以避免偏移问题.

这是我的解决方案: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");
        }    
    });
});?