当div可滚动时，div中的可拖动元素显示在放置区域的后面，需要它们显示在前面

Posted 2023-05-08

【中文标题】当div可滚动时，div中的可拖动元素显示在放置区域的后面，需要它们显示在前面

【英文标题】：Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

【发布时间】：2013-12-06 09:42:00

【问题描述】：

编辑：我能够弄清楚一些事情，这个小提琴反映了变化：http://jsfiddle.net/Kw27r/5/

我有一个 div (#gallery)，其中包含一组可拖动的图块。它们将被放置到另一个包含多个放置区域的 div (#imageDropContainer) 中。这是我遇到的问题：

当#gallery 的overflow-y 属性设置为可见时，一切正常。但是，#gallery 必须有一个固定的高度，这意味着它一次只能显示 2 行图块。因此，如果溢出设置为可见，您将看不到第三行中的任何内容，因为它“隐藏”在紧接在#gallery 下方的#imageDropContainer 后面。如果您将 div 设置为可滚动，那么您可以滚动到 div 中的其他元素，但是在您拖动它们时，这些图块会“隐藏”在放置区域的后面。

如何让 div 保持可滚动状态，但在拖动时让可拖动的图块不隐藏在放置区域的后面？ 换句话说，如何规避标准行为'Overflow' 属性？

这里有一个小提琴来演示：

http://jsfiddle.net/Kw27r/4/

我认为“相关”的 JS 和 CSS 显示在小提琴中。如果我忽略了某些东西，可以从external resources 选项卡中查看其他背景 CSS 和 JS。

感谢阅读！

【参考方案1】：

好吧，我看到你自己回答了，但你的问题让我感到困惑，我想探索它（我不想让我的“研究”白白浪费掉）。

您最初的解决方案永远不会按照溢出定义工作。

I have made a simple demo 这应该可以帮助您理解问题。您必须将拖动的内容放在overflow:scroll 框之外。和你自己的答案一模一样。

Overflow:visible 允许一个盒子内容流出。所以你可以打破你的盒子，去页面上的任何地方。

Overflow:hidden 不允许框内容流出。不适合可见区域的内容将被隐藏。

Overflow:scroll 也不允许框内容流出。但是，滚动条的内容将保持可用（在演示中，可拖动的图像将移动滚动条，这是有趣的效果）。

但是尝试在演示中移动图像，您就会明白我的意思。

【讨论】：

为了解决这个问题，我使用 'start' 事件使 'overflow:visible' 和 'stop' 事件变回 'overflow:scroll'。在大多数情况下都能正常工作。

【参考方案2】：

好吧，感谢您查看这些家伙，但在做一些进一步的研究时，我发现了有关可拖动的 appendTo 属性（由 SO：Jquery draggable: scrolling in droppable using helper 'clone' and appendTo 提供），现在一切正常。我可以简单地将我的可拖动助手附加到明显位于我的拖动区域顶部的不同 div 中。这是我修改后的draggable 代码。这还包括一个附加功能，当拖动第二行之后的一行时，防止滚动条跳回顶部：

jQuery(".galleryTile").draggable(revert: true,
            helper: "clone",
            appendTo:'#templateEditorContainer', //apend it to another div!!
            start: function(e, ui)
            
                $(ui.helper).addClass("ui-draggable-helper");
                latestScroll=$('#gallery').scrollTop(); //keep track of 
                                                        //where the scrollbar was
            ,
            drag: function() 
                jQuery('.galleryTile').css('z-index', '0');
                jQuery('.ui-draggable-helper').css('z-index', '1000');
                jQuery(this).css('z-index', '1000');
                  $('#gallery').scrollTop(latestScroll); //revert the scrollbar to the 
                                                         //correct position instead 
                                                         // of the top
            ,
            stop: function() 
                jQuery(this).css('z-index', '0');
                jQuery('.ui-draggable-helper').removeClass('ui-draggable-helper');
            
        );
        jQuery(".galleryTile").mousedown(prepTileForDragging);