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

Question

编辑:我想出了点什么，这把小提琴反映了变化：http://jsfiddle.net/Kw27r/5/

我有一个div (#gallery)，它包含一组可拖放的瓷砖。它们将被放置到另一个div (#imageDropContainer)中，该div包含多个丢弃区域。以下是我面临的问题：

当#gallery的overflow-y属性设置为visible时，一切都正常。但是，#gallery必须有固定的高度，这意味着它只能同时显示2行瓷砖。因此，如果溢出设置为visible，则无法在第3行中看到任何内容，因为它“隐藏”在紧接#gallery以下的#imageDropContainer后面。如果将div设置为可滚动，则可以滚动到div中的其他元素，但拖放区域后面的瓷砖是“隐藏”的。

如何允许div保持滚动，但拖放块在拖放时不会隐藏在拖放区域后面?换句话说，，如何能够规避 'Overflow' 属性的标准行为？

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

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

我认为“有针对性”的JS和CSS显示在小提琴中。如果我忽略了什么，可以从external resources选项卡查看其他背景CSS和JS。

感谢您的阅读！

Answer 1

好吧，谢谢你看了这些家伙，但是在做一些进一步的研究时，我发现了draggable的appendTo属性(由SO：：使用助手“克隆”和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);

Answer 2

好吧，我看到你自己回答了，但你的问题让我困惑，我想去探索(我不想浪费我的“研究”)。

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

我做了一个简单的演示，它应该帮助您理解问题。您必须将拖动的内容放到overflow:scroll框之外。就像你自己的答案一样。

Overflow:visible 允许从它中流出一个盒子内容。这样你就可以打破你的盒子去网页上的任何地方。

Overflow:hidden 不允许将一个盒子内容从它中流出来。不适合在可见区域内的东西会被隐藏起来。

Overflow:scroll 也不允许的框内容流出来。但是，内容将与滚动条一起使用(在演示中，可拖动的图像将移动滚动条，这是交互效果)。

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