Div 在可滚动容器中具有固定宽度

Question

我正在尝试创建一个区域，我可以在固定宽度的容器中放置和放置物品。

容器包含第一个 div 来显示图像，在这个 div 中有第二个区域缩小以放置我的物品。

<div id="page" style="overflow:scroll;">
    <div id="imageContainer">
        <div id="dropZone">
            <label id="item1">Item1</label>
            <label id="item2">Item2</label>
        </div>
    </div>
    <div class="row">
        <div class="form-group" style="padding-top:10px; text-align:center">
            <button id="BacktoProjet">Back</button>
            <button id="btnSave">Save</button>
        </div>
    </div>
</div>

问题是我的图像和水滴的宽度比我的容器大。滚动可以避免图像溢出，但是如果您打开检查器，您可以看到子项 div 具有它们的真实宽度，即使我们没有在显示屏上看到它们。

当您滚动并使用检查器时，您可以看到拖放区域与其父级一起移动，这很好。但是，当您尝试将一个项目放置在放置区域的隐藏部分而不是容器中时，放置有效但我不想要它。

Screenshot of the inspector

有没有办法在不改变图像大小和drop are的情况下避免这个问题？当您滚动并使用检查器时，您可以看到拖放区域与其父项一起移动。

这是一个fiddle

Answer 1

我找到了解决问题的方法。我不知道这是否是最好的解决方案，但它确实有效。

首先，当我的鼠标是否在主容器中时，我保存一个布尔值：

$('#page').hover(function () {
        $(this).data('hover', 1); //store in that element that the mouse is over it
    },
        function () {
            $(this).data('hover', 0); //store in that element that the mouse is no longer over it
        });

之后，当调用 .droppable 时，我检查之前保存的布尔值是否为真。如果不是我退出 drop 函数。

if (!$('#page').data('hover')) { 
            return;
        }

Div 在可滚动容器中具有固定宽度

Div with fixed width in a scollable container

html

css

jquery

drag-and-drop

overflow