Javascript 禁用隐藏可拖放区域上的拖放事件

我已经实现了一个网页，为了解决这个问题，可以将其简化为下图。用户可以将紫色元素从蓝色侧（拖动区域）拖动到绿色侧（拖动区域）的橙色矩形上

蓝色的一面占页面的百分比。每个橙色矩形的元素水平列出。当许多元素添加到橙色放置区域时，它们将展开以显示所有放置的紫色项目。这将扩展绿色面，但由于蓝色面始终占页面的一定百分比，因此只有通过水平滚动才能看到绿色面溢出

如果橙色矩形已扩展足够长，需要滚动绿色侧以查看橙色矩形中的项目，并且在蓝色区域内释放紫色元素，则橙色放置区域将拾取放置事件。即使项目被放置在看起来像是放置区域的外部，因为蓝色区域下存在可放置区域，所以放置事件被拾取

如何限制橙色矩形仅在不在蓝色区域下方时启动