可滚动容器中具有固定宽度的 Div答案

【问题标题】：Div with fixed width in a scollable container可滚动容器中具有固定宽度的 Div
【发布时间】：2018-05-25 10:02:46
【问题描述】：

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

容器包含第一个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>

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

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

Screenshot of the inspector

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

这是fiddle

【问题讨论】：

有点困惑：P
您提到了拖放功能，但在您的 jsfiddle 中没有类似的功能。我不清楚问题是什么。
是的，抱歉，我用一个带有拖放功能的新 Fiddle 来编辑我的帖子。我还添加了一个 Inspector 屏幕，以便您可以看到可以放置不在可滚动容器中的项目的区域。

标签： jquery html css drag-and-drop overflow

【解决方案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;
        }

【讨论】：