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

前端之家收集整理的这篇文章主要介绍了JqueryUI,将元素拖动到包含大表的滚动可放置div的单元格中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正面临一个拖把问题.

我想要总是看到拖动的元素,我想要能够滚动一个特定的div,以将元素放在我表的任何单元格中.我想也可以把元素从任何div拖到任何div.

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

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

我的方法是否正确?欢迎任何意见!

编辑

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

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

我相信有可能开发一个最好的方法来做到这一点.

不要犹豫,挑战这个解决方案.

解决方法

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

几个月以前没有任何问题.

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

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

$('[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");
        }    
    });
});​

猜你在找的jQuery相关文章