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

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

这是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被调用时，我检查之前保存的布尔值是否为真。如果不是我退出掉落功能。

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

在可分解的容器中具有固定宽度的Div

1 个答案: