jquery - 使用 jQuery UI 启用在叠加层下方的元素中拖动

Question

我有一个不寻常的情况，我想启用拖动和调整大小到位于 html 中另一个图像叠加层后面的图像。看起来像这样。

背景中的图像(即:可乐瓶)使用 jQuery UI 可调整大小和拖动。然而，问题在于在覆盖图像的边界内单击时试图拖动图像。这显然失败了，因为覆盖的图像位于可拖动元素的顶部并且只是透明的。

这是正在使用的 html 和 javascript。

$(".Overlay").draggable({ containment: "#divPhone", scroll: false }).resizable();

<div id="divPhone" style="position: relative;">
    <div style="display: inline-block;" class="Overlay"><img src="ImageSource.png" style="width: 100%;height: 100%;" /></div>
    <div style="position: absolute; left: 85px; top: 0px;"><img src="ImageSource.png" style="width: 240px;" /></div>
</div>

有人可以针对此问题提出任何解决方法吗？我能想到的唯一解决方案是在发生点击事件时切换图像的索引，但假设必须有更好的解决方案。

Answer 1

正如我在评论中提到的，您可以将 CSS 发送到 pointer-events:none;。

这可能不适用于 IE(所有版本)，除非您使用的是 SVG 元素。他们似乎投票决定删除 pointer-events，因为您可能会劫持其他人与它的链接。

正如其他人在类似问题的答案中提到的，您可以forward the events through layers它使用 document.elementFromPoint 方法。使用简单的显示/隐藏技术，您可以暂时隐藏 mask 层，检查下面的点是什么，然后重新显示 mask 层。这种情况发生得如此之快，以至于浏览器不会使 mask 消失。但是，由于您想要拖动和调整大小，因此当您移动鼠标等时会触发许多事件，因此您可能会注意到使用此技术会变得非常滞后。