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

Posted 2023-05-08

技术标签:

【中文标题】JqueryUI，将元素拖入包含大表的滚动可放置 div 的单元格中【英文标题】：JqueryUI, drag elements into cells of a scrolling droppable div containing large table 【发布时间】：2012-09-22 02:47:20 【问题描述】：

我遇到了拖放问题。

我希望始终看到正在拖动的元素，并且希望能够滚动特定的 div 以将元素拖放到表格的任何单元格中。我还希望能够将元素从任何 div 拖动到任何 div。

这个例子几乎可以正常工作。我的最后一个问题是关于单元格hoverClass 属性：当我从靠近“容器B”边界的“容器A”中拖动一个元素时，我实现了一个自动滚动行为以在我的表格中导航以到达任何单元格.但是，在滚动模拟之后，hoverClass 不适用于右侧单元格。但是，该元素总是被放入正确的单元格中。

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

我的方法正确吗？

编辑

我找到了解决方法。想法是在帮助器构造回调期间将元素克隆附加到可滚动容器，然后在 1ms 后使用 setTimeout 函数将帮助器附加到主体。辅助位置必须映射到鼠标位置以避免偏移问题。

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

我确信可以开发出最好的方法来做到这一点。

【问题讨论】：

【参考方案1】：

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

现在可以正常工作几个月了。

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

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

【讨论】：

三年后仍然是最好的解决方案！虽然 5 年后不起作用。即使在那个小提琴中，滚动后也会突出显示错误的单元格。整天都在尝试解决这个问题，但没有取得多大成功。【参考方案2】：

如果我没有正确理解，滚动后，highlitedcells 不是正确的..

在我看来，它计算单元格以从容器元素中突出显示，然后在表格元素内复制 de position。

基本上，它会检查鼠标与“container2”的偏移量，然后突出显示偏移处的单元格，但从表格“t”位置开始。

抓住机会并使用位置而不是偏移量。并在http://api.jquery.com/offset/ 上提到，