使用jquerydraggable将图像拖动到另一个图像下面

我有一张背景图片，上面有一个洞，这样我们就可以看到它下面的东西。 我将另一个图像放置在背景图像下方，以便通过孔可以看到它。现在我需要从透明的孔中拖动下面的图像

背景图像：

我使用z索引将另一个图像放在它后面，并将draggable与之关联。如果我在圆孔上拖动，我希望下图是可拖动的。 目前它不会发生，因为我已经将draggable与后面的另一个div关联，并且我正在拖动它上面的div。如何使上面div上的拖动事件传播到下面div，并将其拖动

我希望我在这里说得很清楚

我的部门：

<div class="container">
 <div id="screen">
    <img src="kailash.jpg" class="drag-image" id="draggable"/>
 </div>
 <div id="bg">
    <img src="final.png"/>
 </div>
</div>

并删除：

pointer-events: none

来自CSS。您可以在此处找到工作示例（跨浏览器）：

希望这对其他人也有帮助：）

当移动上面的div时，会触发一个。使用它，然后根据div的位置更改下图的位置。我只是简单地设置了

指针事件：无和包含的图像

编辑：正如kailash在下面指出的，我最初的建议更兼容浏览器，因此我将其转发给后代：

$('#bg').mousedown(function(ev) {
    $('#screen').trigger(ev);
});

你能做一个JSFIDLE吗？给你：我已经更新了你的小提琴作品，谢谢。你能解释一下吗？另外，拖动是从图像的任何部分完成的，我是否可以通过某种方式使其仅在单击孔时才可拖动？是的，我现在正在处理该问题。解释很简单；将指针事件设置为“无”意味着元素现在对鼠标交互是透明的。@kailash19是一个有点错误的实现。如果鼠标在圆圈外，则触发鼠标点。问题是，我必须估计圆的半径和圆心的坐标。谢谢，这是可行的：），但有点麻烦，因为在外面反复点击会使图像移动缓慢：P。我接受你的答案。你可能需要对此进行一些改进，但这应该是一种通用方法。
$('#bg').mousedown(function(ev) {
    $('#screen').trigger(ev);
});